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

I've had a similar problem and found it difficult to find a nice solution. I was implementing my own caret/cursor into the styled element with a span tag, this has some issues with splitting up words onto new lines however. But I found a solution that's pretty simple and seeing as this is the first thing on Google for this problem I'll share it, as this would have been ideal for me weeks ago if it was here! :)

As said, the solution is to have your styled element underneath the text input. You need to make the text input have a alpha=0 background and color. The color also hides the caret. But there's a CSS property specifically for the caret that you can use the unhide it:

background: rgba( 0, 0, 0, 0.0 );
color: rgba( 0, 0, 0, 0.0 );
caret-color: rgba( 0, 0, 0, 1.0 );

Answer 2

I'm a couple of years late, but hopefully I can provide an actual answer to your problem.

You (or the plug-in) have got the idea right... utilizing another element (the "facsimile element") which contains a styled version of the text in the textarea. There are just a couple of changes that need to be made:

1. The fascimile element is supposed to have the same dimensions (the element as a whole as well as its content area), shape, and position as the textarea
2. The fascimile element is supposed to be placed underneath the textarea rather than on top of it.
3. The background of the textarea is supposed to be made transparent.
4. The text and border of the fascimilie element is supposed to be made transparent.

I'm not sure how much of this is able to be done without modifying the plug-in, but once these changes are made, you shouldn't have to worry about the cursor disappearing since there will no longer be a need for you to hide the textarea.

You're not out of the woods just yet though, there is a lot more that needs to be done to make the solution robust.

So I'd recommend checking out Mentionator, which is a jQuery plug-in that robustly implements the functionality you desire. Its source code is a well-structured, easy to follow, and copiously commented, so should you want to look at the code to understand how the plug-in, and Twitter's tagging utility by extension (most likely), work, you should have little trouble doing so.

One more thing, given i'm such a big proponent of transparency, I'd like to let you know that Mentionator is maintained by yours truly :) .

Answer 3

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.