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 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元素设置为突出显示的内容。
实际onfocus元素的凌乱textarea处理程序。在那里的某个地方，它创建了一个TextAreaControl对象，它似乎在DOM中的其他地方创建了一个对象，因为textarea内容本身没有被更新。
将自定义数据提交给服务器的input[type=hidden].mentionsHidden，以便它知道您实际提到的是谁。

这完全取决于Facebook，但它可能会为您提供一些您想要做的事情。

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

3 个答案: