score:1

i just had to roughly do this for you. next time you must provide snippet for other respectful developers to work with.

the idea here is not to put your chips inside your input. input is not a container so putting elements inside of it isn't ideal. create a wrapper <div> or any container that can container your chips and your input. and then style it like an input, usually putting a border would do.

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>

score:2

for things like this, i usually hide the input, and make a label around the whole thing for the input's id, and style that to look like the actual input.

<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

if only there was a way you could find one of these online... ;p

stack overflow tags stack overflow inspect element


Related Query

More Query from same tag