像Facebook一样突出显示textarea内的文本
Nic*_*rdu 26 html javascript css facebook
当你在回复中输入@ <NAME_OF_A_FRIEND>时,我尝试实现Facebook所做的事情.选择朋友后,该朋友的名称将以蓝色背景突出显示,因此您知道该文本中的单独实体.
我已经"检查了元素"-ed textarea并且没有div放在textarea的顶部.
谁能给我一个关于如何做到的线索？
Jos*_* L. 22
我使用HTML5对这个问题有一个完全不同的方法.我使用的是divwith contentEditable="true"而不是textarea(我使用它直到遇到了你遇到的同样的问题).
然后,如果我想要更改指定部分的背景颜色,我只需用span填充该文本.
我不是100%确定它是否是正确的方法,因为我是HTML5中的新手,但它在我测试过的所有浏览器(Firefox 15.0.1,Chrome 22.0.1229.79和IE8)中都能正常工作.
希望能帮助到你
Dav*_*ues 17
在此处查看此示例.我只使用CSS和HTML ...... JS现在非常复杂.我不确切地知道你的期望.
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;
}
小智 6
textarea有背景色:透明; 您正在寻找的额外div就在它后面,使用与textarea相同的文本和字体,但颜色不同.
一个简短的例子来说明这一点:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight { background-color: #9ff; color: #9ff; }
textarea { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>
当然,当您输入textarea时,这不会更新特殊div,您需要大量的JavaScript.
| 归档时间： |
|
| 查看次数： |
24042 次 |
| 最近记录： |