我有一个可怕的问题，过去两天我一直在绞尽脑汁，但还没有想出解决方案。因此，我认为这需要比我更聪明的人来完成。
我正在尝试构建的是一个模拟 Facebook 的文本框；本质上，标签功能。
现在，如果您使用过 Facebook，您会注意到 Facebook 允许您在评论/帖子中标记人们，只需输入他们的姓名并从下拉列表中选择。然后，您选择的人的姓名会出现在该文本区域中突出显示的文本中。我已经成功地创建并填充了 JQuery 和 AJAX 组合的下拉列表，但标记过程本身就是障碍。
一旦选择了下拉项（通过 Enter 或单击），查询文本将替换为标记名称。现在，很难看出如何给 textarea 中的文本添加任何类型的突出显示，所以我发现（通过检查 Google Chrome 中的元素并删除 textarea 节点）textarea 本身是透明的，并且有一个白色“模拟”文本下方的 div。突出显示的单词被放置在带有自定义 CSS 的标签中，这使它具有蓝色背景。所有这一切都是我自己发现的，并且我已经成功地模拟了这一点——但我只能做一个标签。
现在我进一步调查并发现了一个输入 type="hidden" 元素，属于“mentionsHidden”类。这个输入元素有一个 value 属性，它根据 textarea 的内容动态地填充自己。因此，如果我输入“ABC”，元素的值将变为“ABC”。如果我包含标签，请说“嗨 [Rei]！” （其中 [] 中的名称是标签），元素的值变为“hi @[member_id:Rei]！”。
所以我已经完成了我的作业。但这里是我无法弄清楚的部分。
我无法弄清楚如何用文本框的值动态填充隐藏的输入元素。很明显，给出蓝色标签背景的底层 div 是从输入元素填充的。但是输入元素让我很头疼。
你看，我不能做以下事情：
-我不能简单地“复制”当前文本区域的整个值并将其“粘贴”到输入元素的值中，因为这会覆盖输入元素中任何先前标记的人（毕竟，文本区域只能拥有明文） .
- 即使我可以找到插入符号的当前索引（textarea 中闪烁的黑线，它告诉您要在哪里输入），但这仅适用于 textarea。文本区域和输入元素值中的索引位置 10 可能是不同的东西，因为这种“标记”人的方式会导致向值字符串添加额外的字符。
- 我不能简单地对要替换的文本进行“替换”，因为在值 String 的其他部分中可能存在相同文本的其他实例。
我知道这是一个非常长且令人困惑的帖子，但我希望你明白我的意思。我真的需要一个解决方案，我不想使用 contenteditable，因为它只适用于 HTML5，一些旧版浏览器可能不支持它。
你的，雷