Log in

View Full Version : Change textfield background color if filled?


whitemonkey2
08-17-2009, 09:23 PM
I have a form with many 100's of textfields in which you can enter a number value.

Looking for a script simple javascript + css that would give the text field a highilight background color if filled with a value.
This makes it easy to quickly spot which out of the 100s of text fields have a value entered.

I figured someone has to have come up with a script like this before for forms.

For the default value (empty) the textfield would show the unchanged default background color (none/white)

If it becomes filled with any value it would change the background color of the text field to a light color and possibly bolder text, say a light pink color & bold blue text.

Then if cleared out again the empty field would change back to default/white background color and default text style.

Also since as I mentioned there would be 100s of little text fields if I could do this without embedding an event handler in every single text field that would be ideal. Also if it could just reference a css class in the head.

I read that ie7 and FF now have a pure css way of doing things like this but
to support ie6 it probably needs to be a js + css solution.

If no such script exists maybe someone can take a crack at it.
Thanks in advance

This example I found comes close but it seems to only be changing text color not the background.

script


<script type = "text/javascript">
var defaultText = "";
function WaterMark(txt, evt)
{
if(txt.value.length == 0 && evt.type == "blur")
{
txt.style.color = "gray";
txt.value = defaultText;
}
if(txt.value == defaultText && evt.type == "focus")
{
txt.style.color = "black";
txt.value="";
}
}
</script>


body


<input type="text" ID="TextBox1" runat="server" ForeColor = "Gray" onblur = "WaterMark(this, event);" onfocus = "WaterMark(this, event);">
vwphillips
08-18-2009, 12:39 PM
http://www.vicsjavascripts.org.uk/FormCompendium/MarkFailingFields.htm

or


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function InputHighLight(id,col){
var obj=document.getElementById(id)||document;
var ips=obj.getElementsByTagName('INPUT');
this.ary=[];
for (var z0=0;z0<ips.length;z0++){
if (ips[z0].type=='text'){
this.addevt(ips[z0],'blur','HighLight');
this.ary.push(ips[z0]);
}
}
this.col=col||'red';
}

InputHighLight.prototype.HighLight=function(){
for (var ip,z0=0;z0<this.ary.length;z0++){
ip=this.ary[z0];
ip.style.backgroundColor=ip.value.replace(/\s/g,'')==''?this.col:'transparent';
}
}

InputHighLight.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}


/*]]>*/
</script></head>

<body onload="IP=new InputHighLight(null,'red');">
<input name="" />
<input name="" />

<input type="button" name="" value="TEST" onclick="IP.HighLight();" />
</body>

</html>
whitemonkey2
08-18-2009, 03:30 PM
Close but not quite.

Thanks for the effort.

Maybe I dont understand it right but in testing it this is the way it worked for me.

It starts out white/default which is what I want but then if I enter text in the one of the fields it does not change it's own background color to red but for some reason changes the background of the other emtpy field? The filled field should change color and the empty fields stay white.

Then when I clear them out they both stay red for some reason. They should change back to white.

Any idea how to modify it?

(By the way great script on your page for searching keywords from a long dropdown list! I may have a use for that too.)
vwphillips
08-18-2009, 04:05 PM
InputHighLight.prototype.HighLight=function(){
for (var ip,z0=0;z0<this.ary.length;z0++){
ip=this.ary[z0];
ip.style.backgroundColor=ip.value.replace(/\s/g,'')!=''?this.col:'transparent';
}
}
whitemonkey2
08-18-2009, 05:05 PM
Thanks again

Below is the finalized code for anyone searching for it.
I changed the hex code for a more subtle pink.

One other thing I was curious about will it apply this behavior all text fields in the document or even other types of input types besides just text?

I want most text fields to highlight but If I have one specific field (for example a searchbox) or even other input types that I don't want to display this behavior would an inline stylesheet be the proper way to override it?
Or would the script need to be altered to exclude certain instances?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function InputHighLight(id,col){
var obj=document.getElementById(id)||document;
var ips=obj.getElementsByTagName('INPUT');
this.ary=[];
for (var z0=0;z0<ips.length;z0++){
if (ips[z0].type=='text'){
this.addevt(ips[z0],'blur','HighLight');
this.ary.push(ips[z0]);
}
}
this.col=col||'#FFE4E1';
}

InputHighLight.prototype.HighLight=function(){
for (var ip,z0=0;z0<this.ary.length;z0++){
ip=this.ary[z0];
ip.style.backgroundColor=ip.value.replace(/\s/g,'')!=''?this.col:'transparent';
}
}

InputHighLight.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}


/*]]>*/
</script></head>

<body onload="IP=new InputHighLight(null,'#FFE4E1');">
<input name="" />
<input name="" />

<input type="button" name="" value="TEST" onclick="IP.HighLight();" />
</body>

</html>
vwphillips
08-19-2009, 03:34 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function InputHighLight(id,type,col,cls){
var obj=document.getElementById(id)||document;
var ips=obj.getElementsByTagName('INPUT');
this.ary=[];
for (var z0=0;z0<ips.length;z0++){
if (ips[z0].type==type&&(!cls||(!ips[z0].className||ips[z0].className!=cls))){
this.addevt(ips[z0],'blur','HighLight');
this.ary.push(ips[z0]);
}
}
this.col=col||'red';
}

InputHighLight.prototype.HighLight=function(){
for (var ip,z0=0;z0<this.ary.length;z0++){
ip=this.ary[z0];
ip.style.backgroundColor=ip.value.replace(/\s/g,'')!=''?this.col:'transparent';
}
}

InputHighLight.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}


/*]]>*/
</script></head>

<body onload="IP=new InputHighLight(null,'text','red','no');">
<input class="no" name="" />
<input name="" />

<input type="button" name="" value="TEST" onclick="IP.HighLight();" />
</body>

</html>