CODEWITHSUNDEEP
javascripthtmlcss
Grego
Grego

Reputation: 2250

Adding part of the text from Textarea colored/highlighted somehow

Well, I would like to hightlight part of the text in a textarea tag, like facebook does it when you are linking someone in your status update. how do I do that? Thanks in advance.

Upvotes: 3

Views: 1919

Answers (4)

rinogo
rinogo

Reputation: 9153

If jQuery is in your stack, this plugin should do the trick for you:

https://github.com/mistic100/jQuery-highlightTextarea

Upvotes: 0

Dave
Dave

Reputation: 48

What facebook do is they have a div sitting under the textarea which updates on keyup on from the textarea, which can obviously use tags and css to change how the text looks, they wrap the highlighted words in b tags which have background: lightbluecolor; font-weight:normal

So your markup would look something like this

<div class="highlight">
    hi <b>Dave<b> how are you?
</div>

<textarea></textarea>

.hightlight { position:absolute }
.hightlight b { font-weight:normal; background:#FEFAE2 }

$('textarea').keyup(function(){
    // do stuff with detecting the mentions but essentially:
    $('.highlight').html($(this).val());
})

Upvotes: 1

Adithya Surampudi
Adithya Surampudi

Reputation: 4454

Use this jquery plugin http://plugins.jquery.com/project/htmlArea

from the website

With this very basic plug-in, you can allow any HTML inside a textarea - with full jQuery UI Theme support.

It's as simple as $("TEXTAREA").htmlArea();

There are many options you can set, the colour of the text, position, show formatting options etc. etc.

$("TEXTAREA").htmlArea({color:'#FF00FF',align:'right'});

Upvotes: 0

Matt
Matt

Reputation: 23729

You're going to need the help of Javascript to do this. Because the solution is, I believe, a bit too complex for this Q&A site, I would suggest Googling tutorials, for example: http://www.developphp.com/view.php?tid=1192. There are also some great examples for you to examine: http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/

Upvotes: 0

Related Questions