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!

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

I think this is impossible...

Status
Not open for further replies.
girlinterrupted24

girlinterrupted24

Programmer
Nov 16, 2005
35
ES
Hello there.... I wonder if anyone can help.....

Basically is there any way of.... when a user is typing text into a form text box, IF a certain word is entered this word only could be automatically highlighted in a different colour??

So for example the word "hello", if a user was typing text into the box and this word was entered, "hello" would then automatically say turn to red..... ???

I have a funny feeling its not possible....

any help would be greatly appreciated
 
Sort by date Sort by votes
You might be able to come up with a complex method of simulating a form text box so that you can more directly control the text.
Perhaps using a form field as the object to get focus and setting an absolutely positioned div right by it. Then you would have to trap keypresses and write the typed text into the div field as they type it and test it for anything you want checked for as you go.

It's doable though I have not seen an example of it being done. I have thought about doing this for a project of my own but have never found the time to play around with it.

As cLFlaVA indicated though, it is not possible with the form fields themselves.


Paranoid? ME?? WHO WANTS TO KNOW????
 
Upvote 0 Downvote
If the text box has that level of color functionality, you can do it, but i don't think text boxes afford that.

Sniffing for a word isn't too hard, I think.

Cheers,


[monkey] Edward [monkey]

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
Upvote 0 Downvote
i'm sure this won't help you in your venture, but you can play with it:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">
input, #mock {
    border: 1px solid black;
    width: 200px;
    padding: 0;
    font-family: monospace;
}

#mock {
    overflow: hidden;
}

span.red {
    color: red;
}
</style>

<script type="text/javascript"><!--
function updateDiv(divId, obj, searchFor) {
    var d = document.getElementById(divId);
    var v = obj.value;
    var re = new RegExp( searchFor, "g" );
    
    d.innerHTML = v.replace( re, "<span class=\"red\">" + searchFor + "</span>" );
}
//--></script>
</head>

<body>

<form name="f">
    <input type="text" name="t1" value="" onkeyup="updateDiv('mock',this,'hello');" />
</form>

<div id="mock"></div>


</body>
</html>

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
Thanks for all your help guys... as you have all confirmed - I cannot do it directly within the text box..... and I think my need for it is not so great to start creating extra bits to cater for it..... it was more of me being pedantic and wanting to do it rather than needing to........ I may play when i have more time tho ;)
 
Upvote 0 Downvote
ONLY TESTED in IE 6.0.2800. I think you'll like...

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">
body {
    background-color: #fff;
}

input, #mock {
    border: 1px solid black;
    width: 200px;
    padding: 0;
    font-family: monospace;
}

input {
    background-color: transparent;
    color: #fff;
    position: absolute;
}

#mock {
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
}

span.red {
    color: red;
}
</style>

<script type="text/javascript"><!--
function updateDiv(divId, obj, searchFor) {
    var d = document.getElementById(divId);
    var v = obj.value;
    var re = new RegExp( searchFor, "g" );
    
    d.innerHTML = v.replace( re, "<span class=\"red\">" + searchFor + "</span>" );
}
//--></script>
</head>

<body>

<form name="f">
    <input type="text" name="t1" value="" onkeyup="updateDiv('mock',this,'hello');" autocomplete="off" />
</form>

<div id="mock" onclick="document.forms['f'].elements['t1'].focus(); return false;"></div>



</body>
</html>

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
475
gmmastros
gmmastros
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
775
coldbohemia
coldbohemia
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
818
JScannell
JScannell
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
612
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top