javascript - 如何突出显示文本的多个部分，例如 Facebook 的 @ 提及评论字段？

Question

在 Facebook 的评论文本区域中，当您单击 @ 后跟 friend 姓名的字母时，它会将该 friend 的姓名放在文本区域中并突出显示该名称。您可以继续在文本区域中输入带有不同@提及名称的评论，每个名称都单独突出显示。

这似乎是一个普通的文本区域，所以我很困惑他们如何能够以他们所做的颜色选择多个单独的文本部分。

我运行了 Firebug 并查看了代码，它们没有将文本与 float DIV 或类似内容重叠。

知道他们是怎么做到的吗？

Answer 1

好的，我想我明白他们在做什么。他们有一个背景设置为透明的文本区域。然后他们有一个 DIV 包装文本区域。当您在文本区域中键入内容时，DIV 也会填充文本区域文本。 DIV 将其文本颜色设置为透明(或可以)。因此，DIV 中的文本即使在文本区域后面也不会显示，并且会显示出来，因为文本区域是透明的。为了突出显示，它们只是用 span 将文本包裹在文本区域中。 DIV 文本不会显示，因为它是透明的，但 span 颜色会显示，如果 DIV 中的文本和 textarea 中的文本完美对齐(或足够好)，则 div 中的 span 将通过出现的 textarea 显示突出显示文本区域中的文本。

我认为这可能就是为什么很难使用 Chrome 获取跨度的原因，因为它们位于文本区域的后面。