Как достать фишки внутри поля ввода?

Question

Я добавил это поле ввода в ReactJS, которое создавало фишки, но я не могу получить фишки внутри поля ввода.

Если я продолжу добавлять больше фишек, поле ввода просто продолжит уменьшаться.

Я хочу сохранить фиксированное положение и размер моего блока ввода, и эти фишки внутри коробки. Какой подход я должен использовать?

Ниже мой код React jsx:

<div className="chips" onClick={this.focusInput}>
    {chips}
    <input
        type="text"
        className="form-input chips-input"
        placeholder={placeholder}
        onKeyDown={this.onKeyDown}
        onKeyUp={this.clearInvalidChars}
    />
</div>

Редактировать: я попробовал первое решение, как это:

<div className="form-input chips" onClick={this.focusInput}>
    {chips}
    <input
        type="text"
        className="chips-input"
        placeholder={placeholder}
        onKeyDown={this.onKeyDown}
        onKeyUp={this.clearInvalidChars}
    />
</div>

Теперь это выглядит как это:

Я совершенно нуб в CSS, может кто-нибудь сказать мне, что я могу сделать, чтобы элементы не выскакивали из коробка.

Answer 1

Мне просто пришлось грубо сделать это для тебя. В следующий раз вы должны предоставить Snippet для работы с другими уважаемыми разработчиками.

Идея здесь не в том, чтобы поместить ваши фишки в ваш ввод. input не является контейнером, поэтому размещение элементов внутри него не идеально. Создайте оболочку <div> или любой контейнер, который может содержать ваши фишки и ваш вклад. и затем стилизуйте его как ввод, обычно ставится граница.

var input = document.querySelector(".chip-input");
var chips = document.querySelector(".chips");

document.querySelector(".form-field")
   .addEventListener('click',() => {
      input.style.display = 'block';
      input.focus();
   });
   
input.addEventListener('blur',()=>{
  input.style.display = 'none';
});

input.addEventListener('keypress', function(event){
   if(event.which === 13)
   {
     
      

      chips.appendChild(function ()
      {
         var _chip = document.createElement('div');

         _chip.classList.add('chip');
         _chip.addEventListener('click', chipClickHandler);

         _chip.append(
            (function ()
            {
               var _chip_text = document.createElement('span');
               _chip_text.classList.add('chip--text');
               _chip_text.innerHTML = input.value;

               return _chip_text;
            })(),
            (function ()
            {
               var _chip_button = document.createElement('span');
               _chip_button.classList.add('chip--button');
               _chip_button.innerHTML = 'x';

               return _chip_button;
            })()
         );

         return _chip;
      }());
      input.value = '';
   }
});
  
function chipClickHandler(event){
   chips.removeChild(event.currentTarget);
}

.form-field{
  width: 400px;
  height: auto;
  min-height: 34px;
  border: 2px solid #737679;
  padding: 8px;
  margin: 8px;
  cursor: text;
  border-radius: 3px;
  
  box-shadow: 0 2px 6px rgba(25,25,25,0.2);
}

.form-field .chips .chip {
  display: inline-block;
  width: auto;
  
  background-color: #0077b5;
  color: #fff;
  border-radius: 3px;
  margin: 2px;
  overflow: hidden;
}
.form-field .chips .chip{
  float: left;
}

.form-field .chips .chip .chip--button {
  padding: 8px;
  cursor: pointer;
  background-color: #004471;
  display: inline-block;
}
.form-field .chips .chip .chip--text {
  padding: 8px;
  cursor: no;
  display: inline-block;
  pointer-events: none
}

.form-field > input{
  padding: 15px;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  border: none;
  margin: 5px 0 0;
  display: inline-block;
  background-color: transparent;
}

<div class="form-field">
  <div class="chips">
  </div>
  <input placeholder="Enter something here" autofocus autocomplete="off" class="chip-input" />
</div>
<p><strong>Just type in your text and press enter. BingooO! It works.</strong></p>

Answer 2

для подобных вещей я обычно скрываю ввод и делаю метку вокруг всего этого for идентификатор входа и стиль, чтобы он выглядел как фактический ввод.

<label for="chips-input" class="chips">
  <span>Chip x</span>
  <span>Chip x</span>
  <span>Chip x</span>
  <span>Chip x</span>
  <input type="text" id="chips-input">
</label>

.chips{
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 10px;
  margin: 20px;
  display: block;
  width: 400px;
  max-width: 100%;
  input{
    border: none;
    appearance: none;
  }
}

https://codepen.io/EightArmsHQ/pen/LYpzyde

Если бы только был способ найти один из них в Интернете ...; P