Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Changing the color of selected words in an input text box 1

Status
Not open for further replies.

rickpill

Programmer
Feb 28, 2002
108
0
0
US
Hi,

On entry into an input text box a user enters a bunch of words, some words maybe "key words".

I need to change the color of these "key words", or change the case to upper case - can someone please help me with this?

Thanks,

Rick
 
how are your keywords defined eg my [name] is abc, where name is the keyword?
 
Here's an example:

User enters in input text box:
SALE NYC00001 COUNTRY US GB CA MX
---- -------
The key words here are "SALE" and "COUNTRY". The user would
like to see SALE and COUNTRY in blue, and the selection
words, i.e. NYC00001 and US, GB etc. in red.

This is a simple example, in real word situations, the selections can get pretty complex and difficult to read!

One other thing, this is an ASP application that retrieves
data based on selections!

Thanks,

Rick





 
Would u at all times know exactly what the keywords would be?
It would be better to change the case of specific words instead of changing the color, I think that to change color of specific words, it is only possible in a textarea..
 
Yes, the key words are known. I do change the case of the key words .. I was hoping I could change the color.

Thanks again,

Rick
 
How about this:

<html><head><title></title>
<script type=&quot;text/javascript&quot;>
var keywords=[&quot;sale&quot;,&quot;country&quot;];
function highlightKeywords(span){
var t=span.innerText;
document.f.myField.value=t;
t=t.split(&quot; &quot;);
for(var i=0;i<t.length;i++){
for(var j=0;j<keywords.length;j++){
if(t.toLowerCase()==keywords[j].toLowerCase()){
t=&quot;<font color=red><b>&quot; + t.toUpperCase() + &quot;</b></font>&quot;;
}
}
}
span.innerHTML=t.join(&quot; &quot;);
}
</script>

<body>
<form name=&quot;f&quot;>
<span
contentEditable=true
style=&quot;width:250px; height: 30px; overflow:hidden; border:lightgrey 2px inset;padding:1px; white-space: nowrap&quot;
onkeypress=&quot;return (window.event.keyCode!=13)&quot;
onblur=&quot;highlightKeywords(this)&quot;></span>
<input type=&quot;hidden&quot; name=&quot;myField&quot;>
</form>
</body>
</html>

Adam
while(woman.width>woman.height && wallet.value>0){beer++;vision.blur()};
 
Hi Rick,

If I understand U correct what U want is something where your users can mark portions/words of the text and format it with bold, underline aso. IE has a feature that would allow for this called WYSIWYG.

Take a look at Here U will find anything U need to implement richtext edit functions on your webpages.


Cheers
DiXiE
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top