Facebook Hashtags（在textarea内部突出显示）

Question

我想在facebook highlight the text内textarea。对此的解决方案是保留外部div并突出显示，如此fiddle。但是，可能会有多个突出显示的字段，然后必须在每个时刻计算位置和宽度，这看起来非常复杂。退格也应立即删除完整标记。可以实现这些hashtags的任何方式或实现上述相同技术的任何示例代码？

Answer 1

突出显示在背景图层上进行，该背景图层在keyup事件侦听器上更新（textarea是透明的（background-color: rgba(0,​ 0,​ 0,​ 0)））。如果您向textarea添加一些padding-top（突出显示没有机会更新），这就是它的样子：

Facebook的方法实际上非常聪明，因为您在文本区域中输入内容被评估并发送到背景元素，如下所示：

<span class="highlighterContent"><b>#html</b> This is </span>

<b>元素具有以下css：

.uiMentionsInput .highlighter b {
    background: linear-gradient(#DCE6F8, #BDCFF1) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 2px;
    box-shadow: 0 0 0 1px #A3BCEA;
    font-weight: normal;
}

聪明的是文本区域后面的跨度具有透明字体，因此它占用与文本区域的不透明字体相同的空间（允许<b>高亮显示与textarea文本保持对齐）。那边的聪明人:)）

Answer 2

你可以做这样的事情：

http://jsfiddle.net/HR5N8/

<div id="something" contentEditable="true">
    Hi, my name is <span class="name">John</span> and i'm 20 years old!    
</div>

#something{
    width: 400px;
    height: 100px;
    border: 1px solid grey;
}

.name{
     background: #E1EEF5;   
}

Answer 3

这是一个angularjs指令，它创建一个内容可编辑的div，支持facebook像hashtags highlight https://github.com/sujeet100/ngHashtags

可以使用类似的逻辑来创建你想要的东西而不使用angularjs。