Facebook Hashtags(在textarea内部突出显示)

Question

我想highlight the text在textareafacebook 里面做.解决这个问题的方法是保持一个外部div并突出显示,就像这个小提琴一样.但是可能会有多个突出显示的字段,然后必须在每个时刻计算位置和宽度,这看起来非常复杂.退格也应立即删除完整标记.hashtags可以实现这些的任何方式或实现上述相同技术的任何示例代码？

Answer 1

突出显示发生在背景图层上,该背景图层在keyup事件侦听器上更新(textarea透明(background-color: rgba(0,? 0,? 0,? 0))).如果您padding-top向textarea 添加一些内容(突出显示没有机会更新),这就是它的样子:

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文本保持对齐).聪明的家伙在那边:)