如何在JavaScript / HTML / CSS中处理具有跨度的关键字框

问题描述

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

我目前的尝试几乎奏效。您可以键入关键字，然后按Enter键将其存储。 但是，仅在再次点击关键字框后，才会显示内部关键字框。

如果有人可以帮助我解决这个问题，我将不胜感激。 ：）

address is Now 0,0
read 130
begins with a 1,so table[0,0] <- 30
write table[0,0] -> 30
address is Now 0,30
read 130
begins with a 1,30] <- 30
write table[0,30] -> 30
address is Now 30,so table[30,30] <- 30
write table[30,30] -> 30
address is still 30,30
read 0
is 0,so don't update table
write table[30,30
read 135
begins with a 1,30] <- 35
write table[30,30] -> 35
address is Now 30,35

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.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;
}

re

解决方法

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.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>