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