Hide textarea text but not blinking cursor

Question

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 1

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.