Text box ‘hint’ values with jQuery

Last modified date

Comments: 4

On creating a rather large form recently, I was in the need to have some kind of hint to the user about what format the content should take on several input boxes. I could have done this with a description under the form element, but a more accepted way to do this, it seems, is to have a ‘hint’ in the element itself. You know the kind of thing I mean; a value, usually quite a light grey colour, that is present until you click in to the form element and then is disappears. I also wanted to do this as a jQuery plug-in because, well, why not? 🙂


There are some things to bare in mind with this kind of functionality. Obviously, you only want it to apply to text boxes and textareas – anything else is a waste of time… Even password fields are pointless to have a hint in them because it’ll only be a series of stars anyway!

The next thing to bare in mind is that you don’t want to reset the value if the user has typed anything in. And sometimes you may even want to accept the user typing exactly what the hint is, you you can’t just assume that if the value == the hint then it’s OK to clear.

And with those things in mind, here’s the plug-in:

/**
 * Form text box hints.
 * 
 * This plug-in will allow you to set a 'hint' on a text box or
 * textarea.  The hint will only display when there is no value
 * that the user has typed in, or that is default in the form.
 * 
 * You can define the hint value, either as an option passed to
 * the plug-in or by altering the default values.  You can also
 * set the hint class name in the same way.
 * 
 * Examples of use:
 * 
 *     $('form *').textboxhint();
 * 
 *     $('.date').textboxhint({
 *         hint: 'YYYY-MM-DD'
 *     });
 * 
 *     $.fn.textboxhint.defaults.hint = 'Enter some text';
 *     $('textarea').textboxhint({ classname: 'blurred' });
 *
 * @copyright Copyright (c) 2009, 
 *            Andrew Collington, andy@amnuts.com
 * @license New BSD License
 */
(function($) {
    $.fn.textboxhint = function(userOptions) {
        var options = $.extend({}, $.fn.textboxhint.defaults, userOptions);
        return $(this).filter(':text,textarea').each(function(){
            if ($(this).val() == '') {
                $(this).focus(function(){
                    if ($(this).attr('typedValue') == '') {
                        $(this).removeClass(options.classname).val('');
                    }
                }).blur(function(){
                    $(this).attr('typedValue', $(this).val());
                    if ($(this).val() == '') {
                        $(this).addClass(options.classname).val(options.hint);
                    }
                }).blur();
            }
        });
    };
    
    $.fn.textboxhint.defaults = {
        hint: 'Please enter a value',
        classname: 'hint'
    };
})(jQuery);

Some examples of use (as shown in the plug-in header comment, but I figure it can’t hurt to show it again!)

$('form *').textboxhint();

$('.date').textboxhint({
    hint: 'YYYY-MM-DD'
});

$.fn.textboxhint.defaults.hint = 'Enter some text';
$('textarea').textboxhint({ classname: 'blurred' });

Share

4 Responses

  1. This is very nice piece of code, which I found from couple of other code for same purpose, but only one problem I found, when I integrate in my application. The problem is
    When the page is loaded the input box has applied css called hints, but when I press F5 to refresh the page that time the css “hints” is removed and the text in the inputbox appears with default css.

    can u suggest, what the thing I missed out.
    I have created a css as hint {background:#d3d3d3}
    And
    call this function as following
    $(‘#inpForwardOptions’).textboxhint({
    hint: ‘Select / add phones’
    });

  2. Hi Ashish,

    A couple things to check… The css rule is “.hint” and not “hint”, right? Also, do you have the textboxhint call within a document ready/window load event handler so that the element is loaded before the js tries to update it?

  3. The css rule is correct, it is .hint

    I have placed the entier jQuery script into my custom.js file.
    I have attached this file in the head of html file.
    with in , I have written the calling statement as following

    $(function() {
    $(‘#inpForwardOptions’).textboxhint({
    hint: ‘Select / add phones’
    });
    });

    I have commented the code and put into document ready, even though problem is still same
    PROBLEM:
    #1. CSS is not working
    #2. on focus or click of inputbox test is not disappear
    This problem is occured while pressing F5 to refresh the page

  4. Is this a problem on one specific browser, or does it happen on multiple ones? Also, what version of jQuery are you using?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.