How can you highlight multiple sections of text like Facebook's comment field for @ mentions?

In Facebooks comment textarea, when you click @ followed by the letters of a friend's name, it places that friends name in the textarea with the name highlighted. You can continue typing a comment with different 开发者_JAVA技巧@ mentioned names in the textarea, each of which is separately highlighted.

This appears to be an ordinary textarea, so I'm baffled how they are able to select multiple separate sections of text in the color that they do.

I ran Firebug and looked at the code, and they are not overlapping the text with floating DIV's or anything like that.

Any idea how they are doing this?

OK, I think I see what they are doing. They have a textarea with the background set to transparent. Then they have a DIV wrapping the textarea. As you type in the textarea, the DIV gets populated with the textarea text as well. The DIV has it's text color set to transparent (or can). So, the text in the DIV doesn't show up even though it's behind the textarea and would show through because the textarea is transparent. To highlight, they simply wrap text in the textarea with spans. The DIV text won't show because it's transparent, but the span color will and if the text in the DIV and the text in the textarea are aligned perfectly (or good enough), then the span in the div will show through the textarea appearing to highlight the text in the textarea.

I think that may be why it's hard to use Chrome to get the spans, because they are behind the textarea.

Actually, they do a number of things with it. Here's the source for a comment mentioning someone named Alison:

<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>

They load 12 javascript files and 8 css files in the header, and I don't feel like hunting through them, but it looks like the javascript creates and styles a div. (Here the one Id'd "u335873_14".)