jQuery Form Input Hints Plugin

Use this script to automatically display hints on input textboxes in your forms. It uses the amazing jQuery library. I converted the script into a jQuery plugin called Form Input Hints to make it more flexible.

Update: I created an open source project on CodePlex to host the project. You can download the source with a demo there. I encourage anyone who would like to add to the functionality or change the code to do so in the project & commit your changes. I'll monitor the activity and create releases after testing.

Update: Now when the hint text is active, it adds a CSS class called “hint” to the textbox so you can style your hint text.

Check it out:

Usage:

<input type="text" title="Hint Text!" />

$(document).ready(function() {
   $('input[title]').inputHints();
});

Download from CodePlex: http://jqueryhints.codeplex.com (includes minified, debug, & demo)

Here is the Input Hints jQuery Plugin code:

// jQuery Input Hints plugin
// Copyright (c) 2009 Rob Volk
// http://www.robvolk.com

jQuery.fn.inputHints=function() {
    // hides the input display text stored in the title on focus
    // and sets it on blur if the user hasn't changed it.

    // show the display text
    $(this).each(function(i) {
        $(this).val($(this).attr('title'))
            .addClass('hint');
    });

    // hook up the blur & focus
    return $(this).focus(function() {
        if ($(this).val() == $(this).attr('title'))
            $(this).val('')
                .removeClass('hint');
    }).blur(function() {
        if ($(this).val() == '')
            $(this).val($(this).attr('title'))
                .addClass('hint');
    });
};