Jul 9 2010

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 () {

// 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);