highlight keywords in textarea

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
potato
Forum Contributor
Posts: 192
Joined: Tue Mar 16, 2004 8:30 am
Location: my lovely trailer, next to the big tree

highlight keywords in textarea

Post by potato »

Hi,

i'm looking for a way to highlight some words in a textarea without affecting the content of it.
in the textarea is some html-code, so that doesn't may change when there are words highlighted.

for example, the content of the area looks like this:

<table><tr><td>some keywords to test</td></tr></table>

i already have a higlight script, but it changes the content.
when i want to search for the word 'keywords' in the example above, i would have a result like this:


<table><tr><td>some <font style='color:blue; background-color:yellow;'>keywords</font> to test</td></tr></table>

so my content changes, what i actualy wants is that it leaves the content, but just highlights the keywords, so that in the submitted form, there isn't any highlight in it.


I hope you understand what i'm trying to explain
:?

greetings
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

You can't add style to individual words in a standard textarea.

That being said, you could use a rich-text textarea replacement like FCKeditor...or you could have a live preview DIV.
User avatar
jyhm
Forum Contributor
Posts: 228
Joined: Tue Dec 19, 2006 10:08 pm
Location: Connecticut, USA
Contact:

Re: highlight keywords in textarea

Post by jyhm »

Would style sheets help?

Code: Select all

<style>
#highlighter   {
                       font-color: #000;
                       font: 11px verdana, sans-serif;
                       }

#highlighter:hover   {
                       font-color: blue;
                       font: 11px verdana, sans-serif;
                       }

#highlighter:active   {
                       font-color: #fff;
                       font: 11px verdana, sans-serif;
                       }
</style>

Code: Select all

<div class="highlighter"><table><tr><td>some keywords to test</td></tr></table></div> 
Post Reply