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

Question

我试图弄清楚Facebook是如何做到的。 我知道他们在其中使用了textarea的注释和状态功能，但是如果我在帖子或某物中标记某人，它将以浅蓝色背景突出显示在textarea中选择的文本。 我至少知道textarea的知识，或者我至少知道，这种元素无法做到这一点，那么他们怎么做呢？ 什么技术？ 有人有什么主意吗？ 我想知道如何做，但不确定如何做？

Answer 1

它不是使用经典的textarea完成的。 我知道这听起来很疯狂，但是当您键入内容时，它会生成html，可以在其中标记/突出显示关键字并在输入内容周围移动，以便您可以输入内容。 您可以使用Firebug看看它是如何实时发生的。

Answer 2

我已经完成了一个基于html5演示的示例，使您可以执行此操作。 检查一下http://jsfiddle.net/KStst/这只是告诉浏览器使该部分可编辑，并且它了解html的基本功能。 这可能不是facebook的工作方式，但是考虑到html5是“未来”，它可能值得一玩。

Answer 3

尽管它以某种方式使用了textarea ，但是魔术的大部分是由div和CSS完成的。 我从Safari的Web检查器中拉了这个：

<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的，但是也许可以为您提供一些您想做的想法。