John Smith
John Smith

Reputation: 2813

Check if user typed certain text in textarea

How can I make it so that if the user types @sometext, the text turns a certain colour where the word starts with @ and ends where there's a space.

For example, let's say the user types the following (and I'm using bold to substitute for colour):

@username this is some text.

I know I have to use the following, but I'm not sure how to continue:

$("textarea").keyup(function() {

}

Please help.

Upvotes: 0

Views: 1686

Answers (1)

Guffa
Guffa

Reputation: 700182

To take the text in the textarea and display color coded in a different element, put a tag around each item in the text that you want to set color to, and style that tag.

Example:

$("textarea").keyup(function() {
  $('div').html($(this).val().replace(/(@[^ ]+)/g, '<span>$1</span>'));
});

Demo: http://jsfiddle.net/Guffa/HCt6E/2/

Upvotes: 1

Related Questions