使用 Javascript 按下空格键时在文本区域输入上执行事件

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.

这是我正在尝试做的事情的图像示例：

.

这是我到目前为止所拥有的。如果有人可以帮助我，我将非常感激。

<input id="tags"> 

<script>

document.getElementById("tags").addEventListener('keydown', function (event) {
    if (event.keyCode === 32) {
       // what do I fill in here??
    }
});
</script>

看看 HTML 是什么样子的：

<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 后面跟着一个输入。在用户看来，输入实际上是整行，但事实并非如此——输入只是右侧可输入的部分。

要添加边框，请使用 CSS。要删除附加元素，请调用.remove()在上面。就像是：

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>