Javascript 像 Facebook 一样突出显示 textarea 中的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8438371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlight text inside textarea like Facebook does
提问by Nicu Surdu
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.
当您在回复中键入 @<NAME_OF_A_FRIEND> 时，我尝试实现类似于 Facebook 所做的事情。选择朋友后，该朋友的姓名会以蓝色背景突出显示，因此您知道它在该文本中是一个单独的实体。
I've "inspect element"-ed that textarea and there is no div placed on top of the textarea.
我已经“检查元素” - 编辑了该文本区域，并且文本区域顶部没有放置 div。
Can anyone give me a clue about how that is done ?
谁能给我一个关于如何完成的线索？
采纳答案by David Rodrigues
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.
在此处查看此示例。我只使用了 CSS 和 HTML... JS 现在非常复杂。我不知道你到底期望什么。
HTML:
HTML：
<div id="textback">
<div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>
CSS:
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;
}
回答by José L.
I have a completely different approach to this issue using HTML5. I use a divwith contentEditable="true"instead of a textarea (wich I was using until I got stuck with the same problem you had).
我使用 HTML5 对这个问题有一个完全不同的方法。我使用divwithcontentEditable="true"而不是 textarea （我一直在使用，直到我遇到了同样的问题）。
Then if I want to change the background color of a specified part I just wrapp that text with a span.
然后，如果我想更改指定部分的背景颜色，我只需用跨度包装该文本。
I am not 100% sure if it is the correct approach as I am a newbie in HTML5 but it works fine in all the browsers I have tested it (Firefox 15.0.1 , Chrome 22.0.1229.79 and IE8).
我不是 100% 确定这是否是正确的方法，因为我是 HTML5 的新手，但它在我测试过的所有浏览器（Firefox 15.0.1、Chrome 22.0.1229.79 和 IE8）中都能正常工作。
Hope it helps
希望能帮助到你
回答by David Rodrigues
The textarea has background-color: transparent; the extra div you're looking for is behind it, with the same text and font as the textarea, but different colours.
textarea 有 background-color: transparent; 您正在寻找的额外 div 在它后面，与 textarea 具有相同的文本和字体，但颜色不同。
A short example to illustrate the point:
一个简短的例子来说明这一点：
<!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>
Of course, this does not update the special div as you type into the textarea, you need a lot of JavaScript for that.
当然，这不会在您输入文本区域时更新特殊的 div，为此您需要大量 JavaScript。
回答by Sohail Anwar
hi you can check this jquery autosuggest plugin similar to facebook .I have used this to achive the same functionality you required http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/
嗨，你可以检查这个类似于 facebook 的 jquery autosuggest 插件。我用它来实现你需要的相同功能 http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/
回答by Jesse Atkinson
I would suggest changing the text you want to assign a background inline to to display: inline-block; background-color: #YOURCOLOR;. This should do exactly what you want it to do without all the complexities of some of the above answers.
我建议更改要分配背景内联的文本 to display: inline-block; background-color: #YOURCOLOR;。这应该完全符合您的要求，而没有上述某些答案的所有复杂性。
Ultimately your CSS should look something like this:
最终你的 CSS 应该是这样的：
.name {display: inline-block; background-color: purple;}
Then add some sort of event listener in jQuery (not sure how you're identifying that it is a name) and inside that conditional put:
然后在 jQuery 中添加某种事件侦听器（不确定您如何识别它是一个名称）并在该条件放置中添加：
$(yourNameSelectorGoesHere).addClass(".name");
