javascript - Facebook 标签(在文本区域内突出显示)

Question

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

Answer 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> 突出显示与文本区域文本保持对齐)。那边的聪明人:)