如何处理跨度为 JavaScript / HTML / CSS 的关键字框

Question

我正在尝试构建可变数量的关键字框（关键字框的数量由 php 处理）。为了更好地理解，我制作了三个硬编码 html 关键字框。最终结果应该是多个关键字框，它可以处理多个关键字，并在每个 ENTER 之后在一个单独的内部框中显示它们。如果我点击 BUTTON，所有关键字都应该被提醒。

我目前的尝试几乎成功了。您可以输入关键字，按回车键存储它们。但是再次点击关键字框后，只显示内部关键字框。

如果有人能帮助我解决这个问题，我将不胜感激。 :)

let tags = [];

let tagContainer = document.querySelectorAll('.tag-container');
tagContainer.forEach(function(foo) {
  foo.addEventListener('click', (e) => {
    //console.log(e.target.tagName);

    //if (e.target.tagName === 'I') {
    var tagLabel = e.target.getAttribute('data-item');
    var index = tags.indexOf(tagLabel);
    tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
    foo.querySelectorAll('.tag').forEach(tag => {
      tag.parentElement.removeChild(tag);
    });
    tags.slice().reverse().forEach(tag => {
      var div = document.createElement('div');
      div.setAttribute('class', 'tag');
      var span = document.createElement('span');
      span.innerHTML = tag;
      var closeIcon = document.createElement('i');
      closeIcon.innerHTML = 'close';
      closeIcon.setAttribute('class', 'material-icons');
      closeIcon.setAttribute('data-item', tag);
      div.appendChild(span);
      div.appendChild(closeIcon);
      foo.prepend(div);
    });
    //}
  })
});

let input = document.querySelectorAll('.tag-container input');
input.forEach(function(bar) {
  bar.addEventListener('keyup', (e) => {
    if (e.key === 'Enter') {
      e.target.value.split(',').forEach(tag => {
        tags.push(tag);
      });
      bar.querySelectorAll('.tag').forEach(tag => {
        tag.parentElement.removeChild(tag);
      });
      tags.slice().reverse().forEach(tag => {
        var div = document.createElement('div');
        div.setAttribute('class', 'tag');
        var span = document.createElement('span');
        span.innerHTML = tag;
        var closeIcon = document.createElement('i');
        closeIcon.innerHTML = 'close';
        closeIcon.setAttribute('class', 'material-icons');
        closeIcon.setAttribute('data-item', tag);
        div.appendChild(span);
        div.appendChild(closeIcon);
        bar.prepend(div);
      });
      bar.value = '';
    }
    bar.focus();
  })

});

function clicked() {
  alert(JSON.stringify(tags));
}

.container {
  width: 20%;
  margin: 40px;
  align-self: center;
}

.tag-container {
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  display: flex;
}

.tag-container .tag {
  padding: 5px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  margin: 5px;
  border-radius: 3px;
  background: #f2f2f2;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;
  cursor: default;
}

.tag i {
  font-size: 16px;
  margin-left: 5px;
}

.tag-container input {
  flex: 1;
  font-size: 16px;
  padding: 5px;
  outline: none;
  border: 0;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
<table>
  <td>
    <div class="tag-container">
      <div id="span_tag">
        <span id="span_key" value=""></span>
        <i class="material-icons">close</i>
      </div>
      <input id="input_search" value="" />
    </div>
    </tr>
  </td>
  <td><button type="button" id="bt" onclick="clicked()">Button</button>
    <td/>
</table>
<table>
  <td>
    <div class="tag-container">
      <div id="span_tag">
        <span id="span_key" value=""></span>
        <i class="material-icons">close</i>
      </div>
      <input id="input_search" value="" />
    </div>
    </tr>
  </td>
  <td><button type="button" id="bt" onclick="clicked()">Button</button>
    <td/>
</table>
<table>
  <td>
    <div class="tag-container">
      <div id="span_tag">
        <span id="span_key" value=""></span>
        <i class="material-icons">close</i>
      </div>
      <input id="input_search" value="" />
    </div>
    </tr>
  </td>
  <td><button type="button" id="bt" onclick="clicked()">Button</button>
    <td/>
</table>

重新

Answer 1

const tagContainerNodes = document.querySelectorAll(".tag-container");
tagContainerNodes.forEach((tagContainerNode) => {
  const input = tagContainerNode.querySelector("input");
  input.addEventListener("keyup", e => {
    if (e.key === "Enter") {
      createTag(e.target.value, tagContainerNode, input);
      e.target.value = "";
    }
  });
});

function createTag(tagName, parent, before) {
  var div = document.createElement("div");
  div.setAttribute("class", "tag");
  var span = document.createElement("span");
  span.innerHTML = tagName;
  div.appendChild(span);
  parent.insertBefore(div, before)
}

function clicked() {
  const allTagText = [];
  tagContainerNodes.forEach((tagContainerNode) => {
    const tagNodes = tagContainerNode.querySelectorAll(".tag");
    tagNodes.forEach((tagNode) => {
      allTagText.push(tagNode.textContent);
    });
  });
  console.log(allTagText);
}

.tag-container {
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  display: flex;
}

.tag-container .tag {
  padding: 5px;
  border: 1px solid #ccc;
  margin: 5px;
  border-radius: 3px;
  background: #f2f2f2;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;
}

.tag-container input {
  font-size: 16px;
  padding: 5px;
  outline: none;
  border: 0;
}

<div class="tag-container">
  <input id="input_search" />
</div>
<button type="button" onclick="clicked()">Button</button>

<div class="tag-container">
  <input id="input_search" />
</div>
<button type="button" onclick="clicked()">Button</button>

<div class="tag-container">
  <input id="input_search" />
</div>
<button type="button" onclick="clicked()">Button</button>

如何处理跨度为 JavaScript / HTML / CSS 的关键字框

How to handle keyword boxes with spans in JavaScript / HTML / CSS

html

javascript

keyword

eventhandler