2

facebook status

It looks like selected some text, but the background color will not disappear when you click it or move cursor.

mockee
  • 1,315
  • 2
  • 14
  • 21
  • 1
    Use Firebug and analyze the HTML and CSS to see what they have done. There's probably more to it than just background color. – Mikael Östberg Mar 29 '11 at 09:54
  • I usually use surroundContents method of Range to highlight text in HTML element, but it does not apply to the form element(it only supports plain text). – mockee Mar 29 '11 at 10:10

3 Answers3

1

You can't use textarea element for this. Just make a contentEditable contentEditable div and use javascript to style it.

Andrei
  • 4,237
  • 3
  • 25
  • 31
  • But I found that facebook did not use this method. – mockee Mar 29 '11 at 11:18
  • So, how does FB do it then? If you delete the textarea node, you can see the highlight remains - it's sitting behind the textarea. You can select it because it has invisible text! The highlight is actually a clone of the textarea content with font color set to transparent and the BG color set to the selection highlight color. The apppearance of a selection is really just a nifty visual effect going on in the background - facebook is not writing to or modifying the textarea at all apparently. – jozecuervo Dec 07 '11 at 20:55
1

It may be a div with contentEditable set to true

KooiInc
  • 119,216
  • 31
  • 141
  • 177
0

That could be a div the styled during events and as other suggested make it contentEditable. With regards to textarea I have read similar question here. Check it if it's what your looking for.

Community
  • 1
  • 1
ace
  • 6,775
  • 7
  • 38
  • 47
  • 1
    textarea { posision: absolute; background: transparent } div { posision: absolute; color: transparent } div b { background: gray } – mockee Mar 31 '11 at 05:16