突出显示textarea内的文字,如Facebook [英] Highlight text inside textarea like Facebook does
本文介绍了突出显示textarea内的文字,如Facebook的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当您输入@< NAME_OF_A_FRIEND>时,我会尝试达到Facebook的效果。在回复。选择朋友后,该朋友的名称以蓝色背景突出显示,因此您知道它是该文本中的单独实体。
I try to achieve something like the Facebook does when you type @<NAME_OF_A_FRIEND> in a reply. After you choose a friend, the name of that friend is highlighted with a blueish background, so you know it's a separate entity in that text.
我有inspect元素
I've "inspect element"-ed that textarea and there is no div placed on top of the textarea.
任何人都可以给我一个关于如何做的线索?
Can anyone give me a clue about how that is done ?
>
推荐答案
请参见此示例。我只使用CSS和HTML ... JS现在是非常复杂的。我不知道您的期望。
See this example here. I used only CSS and HTML... The JS is very more complex for now. I don't know exactly what you expect.
HTML:
<div id="textback">
<div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>
CSS:
#textarea {
background: transparent;
border: 1px #ddd solid;
position: absolute;
top: 5px;
left: 5px;
width: 400px;
height: 120px;
font: 9pt Consolas;
}
#backmodel {
position: absolute;
top: 7px;
left: 32px;
background-color: #D8DFEA;
width: 53px;
height: 9pt;
}
这篇关于突出显示textarea内的文字,如Facebook的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文