How to highlight friends name in Facebook status update box (textarea)?

Question

In Facebook status update box, when I type @ and start typing and choose a name, say Steven Gerrard, from the friends list suggested by fb, my friend\'s name is highlighted in t

Answer 1

Here is how it works:

• You superpose the textarea (in front) and a div (behind) that will have the same size, and the same font size.
• The textarea must have a transparent background, so we can see its text, but also see the div behind it.
• The div behind it will have a white text and white background, so the text it contains will be transparent.
• You set a hook on the textarea's keyup, and you process the text it contains as HTML: replace the line breaks by
  , replace the double spaces by   , and also replace all the words that you want to highlight by a version surrounded by .
• Since you can see the highlight div behind the textarea, and that the text the highlight div contains is perfectly aligned with the text in the textarea, and that the is visible, you will have the illusion that the text in the textarea is highlighted.

I've written a quick example based on jquery so you can try it yourself, without too much code to analyze.

---

Here is a sample code you can just copy-paste-save and try:

This sample code will highlight a defined set of word, here: "hello" and "world".

I'll let you adapt it the way you want.

---

Let me know if you have any question or if you need help with this code.