Automatically Add/Remove Self-Labeling for Textboxes
This is simple and I’m sure that many have done this (or something similar) already, but I recently had to go through a website and retro-fit all textboxes with jQuery to automatically remove the “self label” value when the user clicks in the box. Instead of doing all of these individually, I came up with this brief jQuery script to add and remove the labels according to the title attribute (which should be there in lieu of a real label for accessibility). Maybe this will be useful to someone else, but at a minimum, I’ll know where to go to grab this again if I need it. =)
$(document).ready(function () {
InitSelfLabelTextboxes();
});
// Sets textboxes to automatically add (and remove) a 'label' text value based on the title attribute.
// Note that the value should still be present initially so people without JS still can see a label.
function InitSelfLabelTextboxes() {
$('input:text').each(function () {
var thisBox = $(this);
var titleVal = thisBox.attr('title');
if (titleVal.length > 0) {
if (thisBox.val().length == 0) thisBox.val(titleVal);
thisBox.focus(function () {
var currentVal = thisBox.val();
if (currentVal == titleVal) thisBox.val('');
});
thisBox.blur(function () {
var currentVal = thisBox.val();
if (currentVal.length == 0) thisBox.val(titleVal);
});
}
});
}
[...] This post was mentioned on Twitter by Michael Davis. Michael Davis said: RT @fahnzmode: Holy new blog post, Batman! – Automatically Add/Remove Self-Labeling for Textboxes http://bit.ly/9ind6V #jquery [...]