Wolf’s Little Store

I’m starting to get into jQuery. This is a simple example of a common little javascript fix to plug the holes in IE6’s CSS support. It adds a class ‘focus’ while the focus is on a form element with a specific class (input-text); when focus on that form element is lost, the class is removed. This is useful to grey out help text for the user when a form element is out of focus, as not to distract him or her from the rest of the website.

The markup

<input type="text" class="input-text" value="Your e-mail address" />

The CSS

input.input-text {
color: #808080;
}

input.input-text:focus,
input.focus {
color: #000;
}

The javascript

(of course, you need to include jQuery itself)

// Adds a class focus to input text when focused
function focusfix(selector, className) {
$(selector).focus(function() {
$(this).addClass(className);
});
// Removes class when focus is lost
$(selector).blur(function() {
$(this).removeClass(className);
});
}

jQuery(document).ready(function($) {
focusfix('input.input-text', 'focus');
});

References

• jQuery blur event
• jQuery focus event

• Category: code 'n scripts
• Back to the overview