Onclick Change Input Text Field Background Color in HTML

by Hiroshi 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.

Topic: HTML, XHTML, XML, Forms, W3C, Tutorials
Tags: Forms
Post's RSS » RSS 2.0, Post's Comments RSS » RSS 2.0

Share Post!

Author

Hiroshi (published 2148 Posts on TechMynd)

My name is Hiroshi and I am behind the TechMynd. I have been working in the fields of Web Development, Animation, SEO and Web/ Graphics Designing. I am a Geek, Entrepreneur, Founder of TechMynd and some other web properties. Please read more in about page.