Performing an event on a a text area input when spacebar is pressed with Javascript

user_15690889 0
Viewed 295

I'm trying to mimic the tags feature on Stack Overflow where when you click the space button on the text box, it adds a blue border to the previous text in the textbox and adds an X button besides it to remove it if wanted.

Here is an image example of what I'm trying to do:

.

Here is what I have so far. If someone can help me, I would really appreciate it.

<input id="tags"> 

<script>

document.getElementById("tags").addEventListener('keydown', function (event) {
    if (event.keyCode === 32) {
       // what do I fill in here??
    }
});
</script>
javascript-objects dom-events textbox javascript
1 Answers

Look at what the HTML looks like:

<div class="js-tag-editor tag-editor multi-line s-input" style="padding: 0px 9.1px; box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; width: 100%;">
    <span><span class="s-tag rendered-element">javascript<a class="js-delete-tag s-tag--dismiss" title="Remove tag"><svg class="svg-icon iconClearSm pe-none" width="14" height="14" viewBox="0 0 14 14">
            <path d="M12 3.41L10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7z">
            </path>
          </svg></a></span>
      <span class="s-tag rendered-element">arrays<a class="js-delete-tag s-tag--dismiss" title="Remove tag"><svg class="svg-icon iconClearSm pe-none" width="14" height="14" viewBox="0 0 14 14">
            <path d="M12 3.41L10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7z">
            </path>
          </svg></a></span>
      <span class="s-tag rendered-element">javascript-events<a class="js-delete-tag s-tag--dismiss" title="Remove tag"><svg class="svg-icon iconClearSm pe-none" width="14" height="14" viewBox="0 0 14 14">
            <path d="M12 3.41L10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7z">
            </path>
          </svg></a></span>
      <span class="s-tag rendered-element">javascript-objects<a class="js-delete-tag s-tag--dismiss" title="Remove tag"><svg class="svg-icon iconClearSm pe-none" width="14" height="14" viewBox="0 0 14 14">
            <path d="M12 3.41L10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7z">
            </path>
          </svg></a></span>
    </span>
    <input type="text" autocomplete="off" tabindex="103" placeholder="" id="tageditor-replacing-tagnames--input" class="s-input js-tageditor-replacing" style="width: 19px;"><span></span>
  </div>

It's <span>s followed by an input. It looks to the user a bit like the input is actually the whole line, but it's not - the input is only the section on the right that's typable.

To add a border, use CSS. To remove an appended element, call .remove() on it. Something like:

const input = document.querySelector("input");
input.addEventListener('keydown', (event) => {
  if (event.keyCode === 32) {
    const span = input.insertAdjacentElement('beforebegin', document.createElement('span'));
    span.textContent = input.value;
    const x = span.appendChild(document.createElement('button'));
    x.textContent = 'x';
    x.onclick = () => span.remove();
    input.value = '';
  }
});
.tag-container {
  border: 1px solid black;
}
.tag-container span {
  background-color: lightblue;
  border: 1px solid blue;
  padding-left: 1em;
  margin-right: 1em;
}
.tag-container span button {
  margin-left: 1em;
}
.tag-container input:focus, .tag-container input {
  outline: none;
  border: 0;
}
<div class="tag-container">
  <input>
</div>

user_95152070
Related