Home/ Questions/Q 7502297
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T20:49:04+00:00

I’m trying to figure out how Facebook does it. I know they use textarea’s

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Although it is using a textarea in some fashion, the bulk of the magic is done with divs 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.

    • 0