Javascript 如何在HTML输入文本框中将一些字符串设置为单词

我涉及一个网络聊天系统。我有一个输入文本框和一个名称列表，允许用户选择并将其输入文本框。下面是zero CSS JSFIDLE，它允许用户单击名称并在文本框中输入

$document.on'click'，'tag panel contact name'，函数{ 让name=$this.attr'value'； $'textbox'.valname； }; 杰森 二者 科皮 这里的主人 科皮·布莱恩特

---

为什么不使用选择框呢

杰森 二者 科比 这里的主人 科比·布莱恩特

---

下面是我根据您的代码创建的示例代码，您可以使用。我建议将名称与@放在一起，例如@Kopi，这样您就可以识别用户。检查代码，对现有结构做了一些更改。不确定这是否适用于您的用例。我可以告诉你方向

现在，关于第二个问题，请参见代码控制台中的行.log'word before cursor:'+wbc；，这将显示要删除的单词，您可以使用它更新数组

$document.on'click'，'tag panel contact name'，函数{ 让name=$this.attr'valuetag'； var existingval=$'textbox'.val； 如果存在VAL $'textbox'.valexistingval+'@'+name； 其他的 $'textbox'.val'@'+名称； }; $document.on'keydown'，'textbox'，function e{ var代码=e.keyCode | | e.which； 如果代码==8 | |代码==46{ //退格键或删除键 //退格为8，删除为 //console.loggetPose.target； 让endingIndex=getPose.target； 让startingIndex=endingIndex&&endingIndex-1； 让value=e.target.isContentEditable？e.target.innerHTML:e.target.value； 设regex=/[]/； 启动时索引{ if regex.testvalue[startingIndex]{ ++起动指数； 打破 } -起动指数； } var wbc=value.substringstartingIndex，endingIndex； //console.log“光标前的单词：”+wbc； 如果wbc.indexOf@==0{ e、 target.value=value.slice0，startingIndex+value.sliceendingIndex e、 防止违约； } } }; 函数getPoselt{ 如果elt.isContentEditable{//for contenteditable 英语焦点； 让_range=document.getSelection.getRangeAt0； 让range=\u range.cloneRange； range.selectNodeContentselt； range.setEnd\u range.endContainer，\u range.endOffset 返回范围.toString.length； }else{//用于texterea/input元素 返回elt.selectionStart； } } 函数设置POSELT，pos{ 如果elt.isContentEditable{//for contenteditable 英语教学目标聚焦； document.getSelection.collapseelt.target，pos； }else{//用于texterea/input元素 elt.target.setSelectionRangepos，pos； } } 杰森 二者 科皮 这里的主人 科皮·布莱恩特

---

您的js fiddle与您的问题描述不匹配。另外，请将其作为代码片段发布。很抱歉，编辑已完成。我想简化我的问题。使用div和不透明文本框的组合，并在输入的按键事件中处理退格，如果文本框为空，则删除所选名称。这并不能真正回答问题，是吗？@DCR抱歉，我看到了我遗漏的第二个问题。我会更新的。谢谢。。看来这就是我想要实现的。谢谢，伙计