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

问题描述：

我试图弄清楚Facebook如何做到这一点。我知道他们在评论和状态功能中使用了textarea，但是如果我在帖子或某物中标记了某人，它会突出显示textarea中浅蓝色背景的文本选择。我知道textarea的或最后我至少知道，这是不可能的这种类型的元素，所以他们怎么做呢？技术是什么？任何人有任何想法？我在一些烟雾和镜子上如何处理它的工作，但不知道如何？jQuery或JavaScript如何突出显示文本区域中的选定文本

他们可能使用contenteditable请参阅http://html5demos.com/contenteditable。这将允许你改变文本的背景 – dstarh 2012-02-10 21:00:54

@dstarh有趣的是，他们实际上不是，它似乎... – Domenic 2012-02-10 21:09:09

是啊，我看到@ mazzucci的答案。我仍然认为使用contenteditable可以达到同样的效果。 – dstarh 2012-02-10 21:11:35

答

虽然它以某种方式使用textarea，但大部分的魔法都是通过div s和CSS完成的。我把这个从Safari的网络督察：

<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对象，因为textarea内容本身没有被更新，所以似乎在DOM中的其他位置创建对象。
input[type=hidden].mentionsHidden将自定义数据提交给服务器，以便知道您实际提及的是谁。

这完全是Facebook的具体内容，但也许它会给你一些你想做什么的想法。

答

这不是使用经典的textarea完成的。我知道这听起来很疯狂，但是当你键入的时候，它会生成html，它可以标记/突出显示关键字并移动输入，所以你可以输入一个地方。你可以用Firebug看看它是如何实时发生的。

Firebug显示一个textarea ...但也许它隐藏在一个魔术生成的HTML事物后面？真的很疯狂。 – Domenic 2012-02-10 21:09:34

是的，这是我的问题的基础，在叽叽喳喳，linkedin，Facebook和其他像这样的功能的实体查看萤火虫后，我看到了经典的textarea标记。但在听到你的演绎之后，这是有道理的，我猜测一个div，当你将注意力集中在它上面时，设置将重点放在这个隐藏的textarea上，textarea使用关键事件来反映你输入到div的html中的哪些事件。触发其他事物例如@符号.. – chris 2012-02-10 22:49:09

答

我已经制作了一个基于html5演示的示例，它允许您执行此操作。检查出来http://jsfiddle.net/KStst/这只是告诉浏览器使该部分可编辑，它理解基本的html功能。这可能不是Facebook如何做的，但给html5是“未来”，这可能是值得玩的。

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

相关推荐