从Textarea添加部分文本以某种方式着色/突出显示

Question

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.

Answer 1

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());
})

Answer 2

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

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

Answer 3

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/

Answer 4

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'});