Javascript 需要在同一输入框中添加标签和普通文本

我需要在同一个输入框中添加标签和文本。普通文本可以一次删除一个字符。从预先定义的一组特定单词中选择的标签将一次全部删除。普通文本和标记将位于同一个框中

与小提琴的联系 到目前为止，我一直在努力

document.querySelector（“.可选图标”）.addEventListener（'click'，函数（e）{
document.querySelector（“[contenteditable]”）、appendChild（e.target.cloneNode（true））；
});
document.querySelector（'div'）。addEventListener（'keydown'，函数（事件）{
//检查是否有退格
if（event.which==8）{
s=window.getSelection（）；
r=s.getRangeAt（0）
el=r.startContainer.parentElement
//检查当前元素是否为.label
if（el.classList.contains（'label'））{
//检查我们是否正好位于.label元素的末尾
if（r.startOffset==r.endOffset&&r.endOffset==el.textContent.length）{
//防止默认的删除行为
event.preventDefault（）；
if（el.classList.contains（'highlight'））{
//移除该元素
el.移除（）；
}否则{
el.classList.add（'highlight'）；
}
返回；
}
}
}
event.target.queryselectoral（'span.label.highlight'）.forEach（函数（el）{el.classList.remove（'highlight'）；}）
});
[内容可编辑]{
边框：1px实心#000；
保证金：0.4em0；
线高：1.4em；
-webkit外观：textfield；
外观：textfield；
}
img{
垂直对齐：顶部；
最大高度：1.4em；
最大宽度：1.4em；
}
.可选图标img{
光标：指针；
}
span.label.highlight{
背景：#E1ECF4；
边框：1px点#39739d；
}
span.label{
背景：#E1ECF4；
边框：1px点#39739d；
}
只需单击图标即可添加它

标签
标签2
标签3
你可以在这里打字。添加一个图标。
将标记添加到
div
时，将其
contenteditable
属性设置为
false
：

el.setAttribute('contenteditable', false);

我希望这能解决您的问题-请参阅下面的演示：


document.querySelector（“.可选图标”）.addEventListener（'click'，函数（e）{
var el=e.target.cloneNode（真）；
el.setAttribute（'contenteditable'，false）；
document.querySelector（“[contenteditable]”）。appendChild（el）；
});
document.querySelector（'div'）。addEventListener（'keydown'，函数（事件）{
//检查是否有退格
if（event.which==8）{
s=window.getSelection（）；
r=s.getRangeAt（0）
el=r.startContainer.parentElement
//检查当前元素是否为.label
if（el.classList.contains（'label'））{
//检查我们是否正好位于.label元素的末尾
if（r.startOffset==r.endOffset&&r.endOffset==el.textContent.length）{
//防止默认的删除行为
event.preventDefault（）；
if（el.classList.contains（'highlight'））{
//移除该元素
el.移除（）；
}否则{
el.classList.add（'highlight'）；
}
返回；
}
}
}
event.target.queryselectoral（'span.label.highlight'）.forEach（函数（el）{
el.classList.remove（'highlight'）；
})
});
[内容可编辑]{
边框：1px实心#000；
保证金：0.4em0；
线高：1.4em；
-webkit外观：textfield；
外观：textfield；
}
img{
垂直对齐：顶部；
最大高度：1.4em；
最大宽度：1.4em；
}
.可选图标img{
光标：指针；
}
span.label.highlight{
背景：#E1ECF4；
边框：1px点#39739d；
}
span.label{
背景：#E1ECF4；
边框：1px点#39739d；
}
只需单击图标即可添加它

标签
标签2
标签3
你可以在这里打字。添加一个图标。
工作正常。请建议一种方式，让我可以使用可编辑文本区域，而不是div@kukkuzno问题。您是否可以添加一个功能，其中如果我更改标签数据反映在可编辑的div上，则更改标签的文本不会反映在可编辑的div中？好吧，我想这可能是另一个问题，如果你被困在那里：）添加了一个[链接]（）