Javascript 输入字段返回具有字符串中每个单个字符的文本内容的标记

我正在尝试实现一个网站功能，在这个功能中，您输入的每个项目都转换为标记，并且每个项目都由一个字符（例如逗号或空格）分隔。我想要的是，在

keyup

上，应将

span

附加到

.tags

中，其中包含输入项的

textContent

；当用户输入项目名称时，其

textContent

应该会实时更新。我得到的结果是每个字符的

span

；简而言之，“一个字符，一个标记”，当出现逗号时，它会插入一个空白标记

var query=document.querySelector.bind（文档）；
查询（“#textfield”）.addEventListener（'keyup'，insertTag）；
函数插入标记（e）{
var evt=e.目标；
if（evt.值）{
var items=evt.value.split（'，'）；
对于（变量i=0；i

部分{
宽度：100%；
高度：100vh；
背景：耐火砖；
位置：相对位置；
}
第二节集装箱{
最大宽度：50%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
第#节文本字段{
宽度：512px；
边框：2个实心#ccc；
背景：透明；
颜色：#eee；
填充：0.5雷姆；
边界半径：.3rem；
}
第#节文本字段：：占位符{
字体：0.8rem“Arial”，无衬线；
颜色：rgba（255255,0.4）；
}
章节.标签{
显示：网格；
网格模板列：33%33%33%；
网格间距：5px；
页边顶部：1rem；
}
节.标记>跨度{
背景：褐红色；
颜色：#ddd；
文本对齐：居中；
字体：1黑色“Arial”，无衬线；
填充：0.7雷姆1雷姆；
边界半径：.25rem；
光标：指针；
位置：相对位置；
}
section.tags>span:after{
内容：“删除”；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
文本对齐：居中；
线高：2.5；
边界半径：继承；
背景：rgba（0,0,0,0.6）；
显示：无；
}
节.标记>跨度：悬停{
字号：0；
}
section.tags>span:hover:after{
显示：块；
字号：1rem；
}

---

在为完整的输入值创建新标记之前，不会重置现有标记

var query=document.querySelector.bind（文档）；
查询（“#textfield”）.addEventListener（'keyup'，insertTag）；
函数插入标记（e）{
var evt=e.目标；
if（evt.值）{
var x=document.getElementsByClassName（“标记”）；
x[0]。innerHTML=“；//正在重置内容
var items=evt.value.split（'，'）；
对于（变量i=0；i0）{//不添加空标记
span.textContent=项目[i]；
evt.nextElementSibling.appendChild（span）；
}
}
}
}

部分{
宽度：100%；
高度：100vh；
背景：耐火砖；
位置：相对位置；
}
第二节集装箱{
最大宽度：50%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
第#节文本字段{
宽度：512px；
边框：2个实心#ccc；
背景：透明；
颜色：#eee；
填充：0.5雷姆；
边界半径：.3rem；
}
第#节文本字段：：占位符{
字体：0.8rem“Arial”，无衬线；
颜色：rgba（255255,0.4）；
}
章节.标签{
显示：网格；
网格模板列：33%33%33%；
网格间距：5px；
页边顶部：1rem；
}
节.标记>跨度{
背景：褐红色；
颜色：#ddd；
文本对齐：居中；
字体：1黑色“Arial”，无衬线；
填充：0.7雷姆1雷姆；
边界半径：.25rem；
光标：指针；
位置：相对位置；
}
section.tags>span:after{
内容：“删除”；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
文本对齐：居中；
线高：2.5；
边界半径：继承；
背景：rgba（0,0,0,0.6）；
显示：无；
}
节.标记>跨度：悬停{
字号：0；
}
section.tags>span:hover:after{
显示：块；
字号：1rem；
}

像这样吗？不清楚您需要什么。在@wostex代码段中，您将始终只有一个标记。我猜您只是忘记了重置现有标记，因为您正在为输入的整个值创建标记。此外，您应该检查要插入的标记是否包含任何字符并且不是空的。很好的提示。只有一个问题，为什么要在

.tags

的内容已经为空时将其清空？它只在添加第一个标记之前为空。第二次调用insertTag（）时，.tags容器中已经有一个标记。尝试在浏览器中调试以逐步查看正在发生的情况。您可以添加检查以仅在内容不为空时清空内容，但每次执行该检查并不是性能问题。因此，我一直以懒散的方式保存它。：-）非常感谢，兄弟：）