27

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 ?

enter image description here

Nicu Surdu
  • 8,172
  • 9
  • 68
  • 108
  • 5
    Facebook make the `textarea` transparent and put a `div` below. Try to inspect `textarea` element with Chrome and remove it, and try to find again the element. – David Rodrigues Dec 08 '11 at 22:13

5 Answers5

23

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

khr055
  • 28,690
  • 16
  • 36
  • 48
José L.
  • 579
  • 6
  • 16
  • Makes sense. But I (and apparently Facebook :P) prefer the more generic one :) Thank you nevertheless ;) – Nicu Surdu Sep 28 '12 at 06:28
  • But the div doesn't increase in height automatically as you are typing in it . So as you go in typing text , doesn't it start to flow automatically. And then would need js to somehow increase the size of that... – Roshan Khandelwal Jan 12 '14 at 19:14
  • Content editable attribute is supported for quite some time now, and it is adopted by most client-side color-highlight engines, here is an example for similar question http://stackoverflow.com/a/33588043/257319 (easier to understand and it use CSS and no inline-styles). –  Nov 07 '15 at 21:52
18

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;
}
David Rodrigues
  • 12,041
  • 16
  • 62
  • 90
8

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

  • +1 and thank you very much for your answer but I went with the David's answer because it's more straight forward to me. – Nicu Surdu Dec 09 '11 at 11:20
  • You should never do it! absolute positioning and handling textual updates using javascript event-handlers on changes is not the best-practice, in-fact due to the amount of time and effort required to provide and maintain a cross-browser working solution- should be render this answer as plain-harmful! –  Nov 07 '15 at 21:58
  • @EladKarako I attempted to answer with the info on what Facebook does -- or did at the time -- which was what was asked in the question. I neither recommend this approach nor recommend any alternative, since I have not had any reason so far for comparing the different approaches. –  Nov 07 '15 at 22:13
3

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/

Sohail Anwar
  • 304
  • 1
  • 5
  • 16
  • Thank you! Looks awesome. Actually, I'm looking for something like this for iPhone, but rather more complicated. – Nicu Surdu Feb 20 '12 at 13:40
-5

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:

$(yourNameSelectorGoesHere).addClass(".name");
Jesse Atkinson
  • 10,586
  • 13
  • 42
  • 45
  • 1
    You didn't answer my question (or so I believe): how can I change the style to a part of the text inside a textarea? – Nicu Surdu Dec 09 '11 at 11:16
  • The current answer provided does not work. It is not flexible at all. You have to use javascript to listen. I cannot give you an example of an event listener because I do not know enough about what exactly you are looking for. But what I'm doing in my code example is adding a class to a name and giving it a background color. You can only do this if are listening for a name. Once a name is identified simply add a class to it's DOM element that does what you want it to do. Absolutely positioning a div behind it is not workable a solution. – Jesse Atkinson Dec 12 '11 at 19:03
  • 1
    I know how to use jQuery. You can't just put elements inside a textarea, only text. – Nicu Surdu Dec 13 '11 at 07:33
  • Believe it or not, absolutely positioning a div behind the textarea is exactly what Facebook does. @Nicolae is right - you cannot put elements inside a textarea, so this is one of the only ways to do it. – ndbroadbent Mar 24 '12 at 03:23