6

我有一个可怕的问题,过去两天我一直在绞尽脑汁,但还没有想出解决方案。因此,我认为这需要比我更聪明的人来完成。

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

你的,雷

4

1 回答 1

0

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

您将需要textarea按照它们出现的顺序维护每个现有提及的显式位置数据。如果在修改 中的内容后textarea,其中提及的位置发生了变化,则需要确定其值的哪个外观(如果有)将用于表示它,并适当更新提及的位置数据.

有了这样的数据集合,构造 的值就变得微不足道了mentionsHidden,尽管这样的数据的存在使元素变得不必要。

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

于 2016-07-03T16:19:09.900 回答