gistfile1.js

/* 
-------------------------------
Author: Pete Saia
File: inputHelper
Version: 2.0
http://petesaia.com/work/input-helper/
-------------------------------
*/
 (function($) {
    $.fn.inputHelper = function(settings) {
        var passFocused = new Array(),
        passUnfocused = new Array(),
        elm = $(this),
        defaults = {
            unfocusedClass: 'unfocused',
            focusedClass: 'focused'
        },
        options = $.extend(defaults, settings);

        this.each(function(i) {
            var nodetype = elm[i].nodeName;

            if ($(this).attr('type') == 'text' || nodetype == 'TEXTAREA')
            {
                textField($(this), $(this).attr('value'));
            }
            else if ($(this).attr('type') == 'password')
            {
                passField($(this), i, $(this).attr('value'));
            }

        });

		function textField(theElm, val) {
            if ($(theElm).attr('title') == val)
            {
                $(theElm).addClass(defaults.unfocusedClass);
                $(theElm).bind({
                    focusin: function() {
                        if ($(this).attr('value') == val)
                        {
                            $(this).attr('value', '');
                            $(this).removeClass(defaults.unfocusedClass);
                            $(this).addClass(defaults.focusedClass);
                        }
                    },
                    focusout: function() {
                        if ($(this).attr('value').length == 0)
                        {
                            $(this).removeClass(defaults.focusedClass);
                            $(this).addClass(defaults.unfocusedClass);
                            $(this).attr('value', val);
                        }
                    }
                });
            }
        }

        function passField(theElm, i, val) {
            passFocused[i] = '<input type="password" value="" class="ih_replaced_' + i + ' ' + defaults.focusedClass + ' ' + $(theElm).attr('class') + '" id="' + $(elm[i]).attr('id') + '" name="' + $(elm[i]).attr('name') + '" />';
            passUnfocused[i] = '<input type="text" value="' + val + '" class="ih_replaced_' + i + ' ' + defaults.unfocusedClass + ' ' + $(theElm).attr('class') + '" id="' + $(elm[i]).attr('id') + '" name="' + $(elm[i]).attr('name') + '" />';

            if ($(theElm).attr('title') == val)
            {
                $(theElm).replaceWith(passUnfocused[i]);

                $('.ih_replaced_' + i).live('focusin',
                function() {
                    if ($(this).attr('value') == val)
                    {
                        $(this).replaceWith(passFocused[i]).focus();
                        $('.ih_replaced_' + i).focus();
                        $('.ih_replaced_' + i).focus();
                        //for ie
                    }
                });
                $('.ih_replaced_' + i).live('focusout',
                function() {
                    if ($(this).attr('value').length == 0)
                    {
                        $(this).replaceWith(passUnfocused[i]);
                    }
                });
            }

        }
        return this;
    };
})(jQuery);