This is the first in a series of posts on simple CSS and JavaScript form enhancements and validation. More specifically, these are for people using Prototype or jQuery to handle one or two small tasks on a page and really should be using a simple script like this one to handle such tasks.
This method uses CSS to add a pseudo class of :focus to all form elements and for users on browsers that don’t understand this pseudo element, the javascript adds a class of focus to each element. This method ensures the highest level of compatibility and visual consistency for all users.
- Example of Highlighted Form Field
View the demo:
highlightOnFocus Demo
Download the example:
highlightOnFocus.zip
To the right, you’ll see an example of what this object does. It adds a classname of “focus” to a form element when the cursor has entered the field and removes the class when the cursor leaves the field.
You will need to include the following code in the <head> section of your page:
<link rel="stylesheet" type="text/css" href="./css/highlightOnFocus.css">
<!--[if lte IE 7]>
<script type="text/javascript" src="./js/highlightOnFocus.js"></script>
<![endif]-->When IE is the browser, the script will automatically walk through your page elements, identify any forms, loop through the form elements and add focus and blur events that basically add and remove a class of “focus” to the fields. Firefox 3, Safari 3, and Chrome do not need the javascript thanks to the :focus pseudo selector.
@Ahii ..
I am with you. I tested in those same two browers, and I don't see it either.
- spam
- offensive
- disagree
- off topic
LikeThe demo is not working? I tested in IE7 and Firefox... I don't see anything happening on focus? :(
- spam
- offensive
- disagree
- off topic
LikeI hope someone reads this, i want this solution but not on all forms, only two which i have defined with an input id =)
-J
jn.norlin@gmail.com
- spam
- offensive
- disagree
- off topic
LikeHello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru
- spam
- offensive
- disagree
- off topic
LikeChris,
Thanks for the quick response - works great. Looking forward to your next posts in this series.
- spam
- offensive
- disagree
- off topic
LikeMike, I've updated the script. The addEvent object I was using was not working properly. I've also added conditional comments on the javascript so it only fires when the browser is IE.
- spam
- offensive
- disagree
- off topic
LikeThe javascript does not function properly in IE 7.
"this.className is null or not an object"
- spam
- offensive
- disagree
- off topic
LikeSweet.
- spam
- offensive
- disagree
- off topic
Liketest.
- spam
- offensive
- disagree
- off topic
Likeyah yah yah, i saw the demo and pounced, what can ya do? :-P And actually I wasn't aware that older browsers don't respect :focus. So there I learned something.
- spam
- offensive
- disagree
- off topic
Like@jyoseph Yes. You OBVIOUSLY didn't read the post ;)
- spam
- offensive
- disagree
- off topic
LikeWhich, you did cover, lol. :P
- spam
- offensive
- disagree
- off topic
LikeThat's cool. You don't technically need javascript to accomplish this same thing though. You can use the pseudo class ":focus" and ":hover" like so:
input:focus, textarea:focus, select:focus {
background: #FFFFEB;
border: 1px #333;
}
input:focus, textarea:focus, select:focus {
background: #FFFFCC;
border: 1px #333;
}
- spam
- offensive
- disagree
- off topic
Like