javascript - jQuery 或 JavaScript 如何突出显示文本区域中的选定文本

Question

我想弄清楚 Facebook 是如何做到的。我知道他们在评论和状态功能中使用 textarea，但如果我在帖子或其他内容中标记某人，它会在 textarea 中突出显示具有浅蓝色背景的文本选择。我知道 textarea 的，或者至少我最后知道，这种类型的元素不可能做到这一点，那么他们是怎么做到的呢？技术是什么？有人知道吗？关于它是如何完成的，我指望一些烟雾和镜子，但不确定如何？

Answer 1

尽管它以某种方式使用了 textarea，但大部分的魔法都是通过 div 和 CSS 完成的。我从 Safari 的 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>

重要元素:

• div.highlighter 及其后代 span.highlighterContent。请注意，它将 b 元素设置为突出显示的内容。
• 实际 textarea 元素的困惑 onfocus 处理程序。它在那里的某处创建了一个 TextAreaControl 对象，该对象似乎在 DOM 的其他地方创建了一个对象，因为 textarea 内容本身没有更新。
• input[type=hidden].mentionsHidden 将自定义数据提交到服务器，以便它知道您实际提到了谁。

这完全是 Facebook 特有的，但也许它会为您提供一些关于您想做什么的想法。