Question

在Facebook评论textarea中，当您点击@后跟朋友姓名的字母时，它会将该朋友姓名放在textarea中，并突出显示名称。您可以继续在textarea中键入带有不同@提及名称的注释，每个注释都单独突出显示。

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

我运行了Firebug并查看了代码，并且他们没有将文本与浮动DIV或类似的东西重叠。

知道他们是怎么做的吗？

Answer 1

好吧，我想我知道他们在做什么。他们有一个textarea，背景设置为透明。然后他们有一个包裹textarea的DIV。当您在textarea中输入时，DIV也会填充textarea文本。 DIV将文本颜色设置为透明（或可以）。因此，DIV中的文本虽然位于textarea后面但并未显示，因为textarea是透明的。为了突出显示，他们只需在文本区域中使用跨度包装文本。 DIV文本不会显示，因为它是透明的，但是跨度颜色将会如果DIV中的文本和textarea中的文本完全对齐（或足够好），则div中的跨度将通过textarea显示出现突出显示textarea中的文字。

我认为这可能就是为什么很难使用Chrome来实现跨度，因为它们落后于textarea。

Answer 2

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

<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'd“u335873_14”。）

如何突出显示文章的多个部分，如Facebook的@ mentions评论栏？

2 个答案: