Onclick Change Input Text Field Background Color in HTML

by on July 9th, 2007

While clicking in input text field of a form in HTML you can change its background color as in the the following example:

Place this code in head of your page
<script>
var highlightcolor="#BFB9AE"
var ns6=document.getElementById&&!document.all
var previous=''
var eventobj
var intended=/INPUT|TEXTAREA|SELECT|OPTION/
function checkel(which){
if (which.style&&intended.test(which.tagName)){
if (ns6&&eventobj.nodeType==3)
eventobj=eventobj.parentNode.parentNode
return true
}
else
return false
}
function highlight(e){
eventobj=ns6? e.target : event.srcElement
if (previous!=''){
if (checkel(previous))
previous.style.backgroundColor=''
previous=eventobj
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
}
else{
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
previous=eventobj
}
}
</script>

and

Input Text Field Code
<input name="email" id="email" type="text" onKeyUp="highlight(event)" onClick="highlight(event)">

Don’t forget to use script tags for head section: javascript part and change the color value in script accordingly.

Share