Facebook标签(在文本区域内突出显示) [英] Facebook Hashtags (Highlighting inside the textarea)

问题描述

我想像Facebook一样将highlight the text放在textarea内.解决此问题的方法是保留一个外部div并突出显示，如 fiddle 所示.但是然后可能会有多个突出显示的字段，然后必须在每个时刻计算位置和宽度，这似乎非常复杂.退格键也应立即删除完整的标签.这些hashtags可以通过任何方式实现，或者任何示例代码可以实现上述相同技术?

I want to highlight the text inside the textarea as facebook does. A solution to this is to keep an external div and highlight, as in this fiddle. But then there might be multiple highlighted field and then there position and width will have to be calculated at every instant, which seems very complex. Also backspace should remove the complete tag at once. Any way in which these hashtags can be implemented or any sample code implementing the same technique above?

推荐答案

突出显示发生在通过keyup事件侦听器更新的背景层上(textarea是透明的(background-color: rgba(0,​ 0,​ 0,​ 0))).如果您在文本区域中添加一些padding-top(突出显示没有机会进行更新)，则外观如下:

The highlighting is occurring on a background layer that is updated on a keyup event listener (the textarea is transparent (background-color: rgba(0,​ 0,​ 0,​ 0))). This is what it looks like if you add some padding-top to the textarea (the highlight doesn't have an opportunity to update):

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

Facebook's approach is actually really clever, as you type in the text area the contents are evaluated and sent to a background element that looks like this:

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

<b>元素具有以下css:

The <b> element has the following 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>高亮显示与文本区域文本保持对齐).那边的聪明人:)

The smart thing is the span behind the text area has a transparent font so it takes the same space as the opaque font of the text area (allowing the <b> highlight to stay aligned with the textarea text). Smart guys over there :)

这篇关于Facebook标签(在文本区域内突出显示)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！