像Facebook一样突出显示textarea内的文本

时间:2011-12-08 22:06:59

标签: javascript html css facebook

当我输入@< NAME_OF_A_FRIEND>时,我尝试实现类似Facebook的功能。在回复中。选择朋友后,该朋友的名字会以蓝色背景突出显示,因此您知道它是该文本中的单独实体。

我“检查元素”-ed textarea并且没有div放在textarea的顶部。

有人能告诉我这是怎么做到的吗?

enter image description here

5 个答案:

答案 0 :(得分:21)

我使用HTML5对此问题采用完全不同的方法。我使用divcontentEditable="true"而不是textarea(我使用它直到遇到与您相同的问题)。

然后,如果我想更改指定部分的背景颜色,我只需用一个跨度包裹该文本。

我不是100%确定它是否是正确的方法,因为我是HTML5中的新手,但它在我测试过的所有浏览器(Firefox 15.0.1,Chrome 22.0.1229.79和IE8)中都能正常工作。

希望有所帮助

答案 1 :(得分:17)

this example here。我只使用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;
}

答案 2 :(得分: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。

答案 3 :(得分:3)

嗨,你可以查看这个类似于facebook的jquery autosuggest插件。我用它来实现你需要的相同功能 http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/

答案 4 :(得分:-5)

我建议您将要内联的背景文本更改为display: inline-block; background-color: #YOURCOLOR;。如果没有上述某些答案的复杂性,这应该完全符合您的要求。

最终你的CSS应该是这样的:

.name {display: inline-block; background-color: purple;}

然后在jQuery中添加某种事件监听器(不确定你是如何识别它是一个名字)并在条件放置中:

$(yourNameSelectorGoesHere).addClass(".name");