jQuery or JavaScript how to highlight selected text in a textarea

Question

I'm trying to figure out how Facebook does it. I know they use textarea's in there comments and status features, but if I tag someone in a post or something, it will highlight that selection of text in the textarea with a light blue background. I know textarea's or last I knew rather at least, that this wasn't possible with this type of element, so how are they doing it? Whats the technique? anyone have any idea? Im banking on some smoke and mirrors as to how its being done, but not sure how?

Answer 1

It is not done using a classic textarea. I know it is sounds crazy, but as you type, it generates html where it can mark/highlight keywords and moves an input around so you have a place to type. You can have a look with Firebug to see how it happens in real time.

Answer 2

I've worked up an example based on the html5 demo that allows you to do this. Check it out http://jsfiddle.net/KStst/ This is just telling the browser to make the section editable and it understands basic html features. This is probably not how facebook is doing it but given html5 is "the future" it's probably worth playing with.

Answer 3

Although it is using a textarea in some fashion, the bulk of the magic is done with div s and CSS. I pulled this from Safari's Web Inspector:

<div class="inputContainer">
  <div class="uiMentionsInput" id="up84fa_5">
    <div class="highlighter" style="direction: ltr; text-align: left; ">
      <div style="width: 499px; ">
        <span class="highlighterContent"><b>Brandan Lennox</b> is the coolest.</span>
      </div>
    </div>

    <div class="uiTypeahead composerTypeahead mentionsTypeahead" id="up84fa_9" style="height: auto; ">
      <div class="wrap">
        <input type="hidden" autocomplete="off" class="hiddenInput">
        <div class="innerWrap">
          <textarea class="uiTextareaAutogrow input mentionsTextarea textInput" title="What's on your mind?" name="xhpc_message_text" placeholder="What's on your mind?" 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('j4f3584ff4f90d07867222385').init(JSCC.get('j4f3584ff4f90d07867222386'));;JSCC.get('j4f3584ff4f90d07867222386').init([&quot;buildBestAvailableNames&quot;,&quot;hoistFriends&quot;]);JSCC.get('j4f3584ff4f90d07867222383').init({&quot;max&quot;:10}, null, JSCC.get('j4f3584ff4f90d07867222385'));;;});});" autocomplete="off" style="height: 48px; direction: ltr; ">What's on your mind?</textarea>
        </div>
      </div>
    </div>
    <input type="hidden" autocomplete="off" class="mentionsHidden" name="xhpc_message" value="@[815490222:Brandan Lennox] is the coolest.">
  </div>
  <div class="attachmentMetaArea"></div>
</div>

The important elements:

• The div.highlighter and its descendant span.highlighterContent . Notice that it styles a b element as the highlighted content.
• The messy onfocus handler for the actual textarea element. Somewhere in there, it creates a TextAreaControl object, which seems to create an object somewhere else in the DOM, since the textarea content itself is not being updated.
• The input[type=hidden].mentionsHidden that submits custom data to the server so it knows who you actually mentioned.

This is totally Facebook specific, but maybe it gives you some ideas for what you'd like to do.