Justin Justin - 5 months ago 26
Javascript Question

Hide textarea text but not blinking cursor

I am trying to emulate how twitter highlights users when they are @mentioned when composing a tweet.

I am using the mentionsInput jQuery plugin. I want to change the color of the @screen_name instead of changing the background color as the plugin does by default.

Is there a way to color the @screen_name and still show the blinking cursor at the end?

I was able to do it but I need to hide the textarea text so it doesn't darken the CSS styled text over it... but then it hides the blinking cursor which I don't want to do.

See my jsFiddle showing the problem: http://jsfiddle.net/thhbe/1/

OR see it...

Required: jQuery, Underscore.js and the plugin.

HTML:

<div><textarea id="tweet_textarea" class="mention textarea compose_text"></textarea></div>


JS:

/*
* Add handlers to HTML elements and set options....
*/
$('textarea.mention').mentionsInput({
onDataRequest:function (mode, query, callback) {
var data = [
{ id:1, name:'Kenneth Auchenberg', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' },
{ id:2, name:'Jon Froda', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' },
{ id:3, name:'Anders Pollas', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' }
];

data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });

callback.call(this, data);
}
});

Answer

The answer for me is to use contenteditable http://html5demos.com/contenteditable. It does not appear that this is how twitter has done it for their tweet input (which has mentions highlighted) but I have given up on figuring out how they did it.