提到模仿Facebook的系统

Question

我有一个可怕的问题,我过去两天一直在为自己的大脑而挣扎,并且尚未提出解决方案.因此,我认为这需要比我更聪明的人来完成.

我正在尝试构建的是一个模拟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,而一些较旧的浏览器可能不支持它.

你的,Rei

Answer 1

我希望您能够想出或找到解决问题的方法。由于这里似乎没有，我想为任何可能偶然发现这一点的人提供一个（如果我的假设不正确的话，也包括你）。

您将需要按照textarea它们出现的顺序维护每个现有提及的明确位置数据。如果修改 中的内容后textarea，其中提及的位置发生更改，您将需要确定将使用其值的哪个外观（如果有）来表示它，并适当更新提及的位置数据。

有了这样的数据集合，构造 的值就变得很简单mentionsHidden，尽管此类数据的存在使得该元素变得不必要。

Mentionator是一个现有的、强大的解决方案，它采用这种方法来提供您尝试重新创建的功能。考虑到它结构良好、易于理解且注释丰富，它应该对您有用，可以作为开箱即用的解决方案，也可以作为您推出自己的解决方案时引用的参考材料。它确实由您维护:)。