我遇到了一个可怕的问题，过去两天我一直在绞尽脑汁，但还没有想出解决方案。因此，我认为这需要比我更聪明的人来完成。
我试图构建的是一个模拟Facebook的文本框;本质上是标记功能。
现在，如果您使用过Facebook，您会注意到Facebook允许您在评论/帖子中标记人员，只需输入他们的名字并从下拉列表中选择即可。然后，您选择的人员的姓名将显示在该文本区域中突出显示的文本中。我已经成功地创建并填充了JQuery和AJAX的组合下拉列表，但是标记过程本身就是障碍。
选择下拉项（通过 Enter 或单击）后，查询文本将替换为标记的名称。现在，很难看出如何在文本区域中为文本提供任何类型的突出显示，因此我发现（通过检查 Google Chrome 中的元素并删除文本区域节点）文本区域本身是透明的，并且在"模拟"文本下方有一个白色div。突出显示的单词放置在带有自定义 CSS 的标签中，这使其具有蓝色背景。所有这些我自己都发现了，我已经成功地模拟了这一点 - 但我只能做一个标签。
现在我进一步调查并发现了一个输入类型="隐藏"元素，类"提及隐藏"。此输入元素具有 value 属性，该属性根据文本区域的内容动态填充自身。因此，如果我输入"ABC"，元素的值将变为"ABC"。如果我包含标签，请说"嗨 [Rei]！（其中 [] 中的名称是标签），元素的值变为"hi @[member_id：Rei]！"。
所以我做了功课。但这是我无法弄清楚的部分。
我不知道如何准确地用文本框的值动态填充隐藏的输入元素。很明显，提供蓝色标签背景的基础div 是从输入元素填充的。但是输入元素让我头疼。
你看，我不能做以下事情：
-我不能简单地"复制"当前文本区域的整个值并将其"粘贴"到输入元素的值中，因为这会覆盖输入元素中任何以前标记的人（毕竟，文本区域只能拥有明文）。
-即使我可以找到插入符号的当前索引（文本区域中闪烁的黑线，告诉您要输入的位置），但这仅适用于文本区域。文本区域中的索引位置 10 和输入元素的值可能是不同的东西，因为这种"标记"人员的方式将导致向值 String 添加其他字符。
-我不能简单地"替换"我打算替换的文本，因为在值 String 的其他部分中可能存在相同文本的其他实例。
我知道这是一个很长且令人困惑的帖子，但我希望你明白我的意思。我真的需要一个解决方案，我不想使用contenteditable，因为它仅适用于HTML5，一些较旧的浏览器可能不支持它。
你瑞
你能够想出或找到解决问题的方法。由于这里似乎没有，我想为任何可能偶然发现这一点的人提供一个（如果我的假设不正确，还有你）。
您将需要按照textarea中每个现有提及的显示顺序维护它们的显式位置数据。如果在修改 textarea 中的内容后，提及在其中的位置发生更改，则需要确定其值的外观（如果有）将用于表示它，并适当更新提及的位置数据。
有了这样的数据集合，构造mentionsHidden的值变得微不足道，尽管这些数据的存在使得元素变得不必要。
Mentionator 是一个现有的、强大的解决方案，它采用这种方法来提供您尝试重新创建的功能。考虑到它结构良好、易于遵循且评论丰富，它应该对您有用，作为开箱即用的解决方案或参考材料，以便在您推出自己的解决方案时引用。它由您的真正:)维护。