Have you seen those text boxes on the web that have a hint contained inside of it and wondered how you could implement that? It's pretty easy with jQuery, and there already exist some plugins that you can use, for example here is one. When I set out to do this I didn’t even look to see what was out there because I wanted to write a jQuery plugin, but the solution that I can up with is not that different from that one.

Here is how I wanted the plugin to behave

1. Add a specified hint to the text box, if the input element was not focused and empty
2. When the text box was focused, the hint should disappear
3. When a form is submitted all hints should be removed prior to ensure that they are not incorrectly submitted

First what I did was to create the a file named jquery.sedotech.inputWithHint.js. You should name your plugins using this naming convention

jquery.customString.pluginName.js

Here is the source for the plugin

(function ($) {
    var hintClassName = 'inputWithTextHint';

    $.fn.addHint = function (hint) {
        var filteredSet = this.filter('input:text, textarea');
        filteredSet.each(function () {
            // In here 'this' refers to an individual element
            doAddHint($(this), hint);
        });

        // Find all forms and update the pre post to remove the hint
        $('form input:submit').click(function () {
            $('input:text, textarea').each(function () {
                if ($(this).hasClass(hintClassName) && $(this).attr('hint')
                && $(this).val() == $(this).attr('hint')) {
                    $(this).val('');
                }
            });
        });
    }

    function doAddHint(target, hint) {
        // Only add hint if the target is empty
        if (target.val() == '') {
            addHintToInput(target, hint);

            target.focus(function () {
                // If the target has the hint class on it then a hint must be showing
                //  when hint is showing put cursor at the begining
                if ($(this).hasClass(hintClassName)) {
                    // remove the hint
                    $(this).val('');
                    // remove class
                    $(this).removeClass(hintClassName);
                }
            });

            target.blur(function () {
                // If no text then add hint class back
                if ($(this).val() == '') {
                    addHintToInput(target, hint);
                }
            });
        }
    }

    function addHintToInput(target, hint) {
        target.val(hint);
        target.addClass(hintClassName);
        // add attribute to the target to store hint
        target.attr('hint', hint);
    }
})(jQuery);

Some things to take note of. When you are creating a plugin in you should use the pattern

(function ($) {
    // plugin code here
})(jQuery);

Take note of the ($) as the parameter and (jQuery) at the end. What is happening here is that you are defining an anonymous function declaring a parameter named $ and then invoking that function passing in the jQuery object. You do this because when you are authoring plugins the $ variable is not available, you have to use the other alias jQuery, but that’s just way too difficult. If you use the pattern you are ensured that the $ alias is available and it won’t conflict with other Javascript libraries.

Beyond this all I’m doing is filtering the list of items which are passed in, with the expression var filteredSet = this.filter('input:text, textarea'), to make sure that the plugins doesn’t touch elements which it is not familiar with modifying. After I add the hint, by calling doAddHint on each element in the filtered set, I make sure that the forms on the page are not submitted with those hints.

Resource Links

• All my jQuery resources
• Live Demo for this plugin

Sayed Ibrahim Hashimi