Javascript 如何突出显示文本的多个部分，如Facebook的@References评论字段？

在Facebooks评论文本区域中，当您单击@后接朋友姓名的字母时，它会将该朋友的姓名置于文本区域，并突出显示姓名。您可以继续在文本区域中键入具有不同@refered名称的注释，每个名称都单独突出显示

这似乎是一个普通的文本区域，所以我对他们如何能够选择多个不同颜色的文本部分感到困惑

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

---

知道他们是怎么做的吗？

事实上，他们用它做了很多事情。以下是提到一位名叫艾莉森的人的评论来源：

<div class="commentBox">
<div class="uiMentionsInput textBoxContainer" id="u335873_14">
<div>
<div class="highlighter">
<div id="u335873_18" style="width: 342px; "><b>Alison</b> 
</div>
</div>
<div class="uiTypeahead mentionsTypeahead  " id="u335873_17">
<div class="wrap"><input type="hidden" autocomplete="off" class="hiddenInput">
<div class="innerWrap"><textarea class="uiTextareaNoResize uiTextareaAutogrow textBox mentionsTextarea textInput enter_submit" title="Write a comment..." placeholder="Write a comment..." name="add_comment_text_text" id="u335873_16" onfocus="return wait_for_load(this, event, function() {if (!this._has_control) {new TextAreaControl(this).setAutogrow(true);this._has_control = true;}return wait_for_load(this, event, function() {JSCC.get('j4d91fdee791a839640843').init([]); ; return wait_for_load(this, event, function() {JSCC.get('j4d91fdee791d839640841').init($(&quot;u3873_14&quot;), JSCC.get('j4d91fdee791a05d839843'), $(&quot;u373_18&quot;), $(&quot;u373_19&quot;), 6, {}, {&quot;raw&quot;:null,&quot;flattened&quot;:&quot;&quot;,&quot;mention_data&quot;:[]}); ;});;});});" autocomplete="off">Write a comment...</textarea>
</div>
</div>
<div class="uiTypeaheadView   hidden_elem" id="u335873_15">
</div>
</div><input type="hidden" autocomplete="off" id="u335873_19" name="add_comment_text" value="@[107209:Alison] ">
</div>
</div>
<div class="uiUfiAddTip commentUndoTip fss fcg">Press Shift+Enter to start a new line.
</div>
</div>

---

他们在头文件中加载了12个javascript文件和8个css文件，我不想浏览它们，但看起来javascript创建了一个div并设置了它的样式。这里的Id是u335873_14

好的，我想我看到他们在做什么了。他们有一个背景设置为透明的文本区域。然后他们有一个DIV来包装文本区域。当您键入textarea时，DIV也会被textarea文本填充。DIV的文本颜色设置为透明或can。因此，DIV中的文本不会显示，即使它位于textarea后面，也会显示出来，因为textarea是透明的。要高亮显示，它们只需在文本区域中用跨距将文本换行。DIV文本不会显示，因为它是透明的，但是span颜色会显示，如果DIV中的文本和textarea中的文本对齐完美或足够好，那么DIV中的span将通过textarea显示，以突出显示textarea中的文本

---

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

我从Chrome Inspect元素功能中获得了这一点。我看到了相同的内容，但我不确定它们如何将高亮显示的文本正确定位在文本区域上。我甚至没有在DIV中看到任何包含这样的内容innerWrap或wrap。如果他们正在设置一个div的样式，那么在我输入文本后，Chrome中的inspect元素功能应该会在高亮显示文本的位置显示一个新的div或span。假设是这样做的。但是，当我检查文本时，它不会显示文本高亮显示的任何新的/其他div或span。就在文本区。因此我感到困惑。对，我猜创建的div是浮动在textarea的后面或前面，textarea插入了适当长度的空格。可能在前面，因为你可以点击它。在我看来这有点像，因为提及的间隔有时很时髦。