Facebook Hashtags（在文本区域内突出显示）答案

【问题标题】：Facebook Hashtags (Highlighting inside the textarea)Facebook Hashtags（在文本区域内突出显示）
【发布时间】：2014-06-18 13:29:21
【问题描述】：

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

【问题讨论】：

这里是一个 angularjs 指令，它创建一个支持 facebook 的内容可编辑 div，例如主题标签突出显示 github.com/sujeet100/ngHashtags 类似的逻辑可用于创建您想要的内容，而无需使用 angularjs。

标签： javascript jquery html css hashtag

【解决方案1】：

突出显示发生在背景层上，该背景层在 keyup 事件侦听器上更新（textarea 是透明的 (background-color: rgba(0, 0, 0, 0))）。如果你在文本区域中添加一些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> 突出显示与文本区域文本保持对齐）。那边的聪明人:)

【讨论】：

哈哈，真的吗？从未知道。我认为这是 contentEditable-magic。我必须对此进行进一步调查。 +1 顺便说一句。

【解决方案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;   
}

【讨论】：

我尝试过这种方式，但使用 div 的问题是我无法为其添加占位符。有什么办法可以添加占位符？
最糟糕的方法...你如何识别每个标签的位置。它应该是相对于内容的宽度。