Highlight text inside textarea like Facebook does

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.

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 ?


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.


<div id="textback">
    <div id="backmodel"></div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>


#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;

I have a completely different approach to this issue using HTML5. I use a div with contentEditable="true" instead of a textarea (wich I was using until I got stuck with the same problem you had).

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).

Hope it helps

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.

A short example to illustrate the point:

<!DOCTYPE html>
* { 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; }
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
This is a demonstration.

Of course, this does not update the special div as you type into the textarea, you need a lot of JavaScript for that.

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/

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.

Ultimately your CSS should look something like this:

.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:


Need Your Help

return single instance object as IEnumerable

c# casting ienumerable

I have in instance of class foo and i want to return it as IEnumerable.