/* * jQuery placeholder Plugin * version: 0.1 * @requires: jQuery v1.4.1 or later, Modernizr, and jquery livequery plugin * * http://docs.jquery.com/Plugins/livequery * * To use: When you write your input tags, include a title and placeholder attribute as * well as a placeholder class. Also include styling for the hasPlaceholder class. * * E.g.: * CSS: * .hasPlaceholder { color: #ddd; font-style: italic; } * * */ if (!Modernizr.input.placeholder) { $(function() { var blurInputs = function (selector) { selector.each(function () { var trimmedTitle = $.trim(this.title), trimmedValue = $.trim(this.value); if (trimmedTitle !== '' && (trimmedValue === '' || trimmedValue == trimmedTitle)) { this.value = this.title; $(this).addClass('hasPlaceholder'); } }); }; $(':text.placeholder') .livequery(function () { blurInputs($(this)); }) .live('focus', function () { if ($.trim(this.title) !== '' && $.trim(this.value) === $.trim(this.title)) { this.value = ''; $(this).removeClass('hasPlaceholder'); } }) .live('blur', function () { blurInputs($(this)); }); $("form").live("submit", function () { $(this).find(':text.hasPlaceholder').val(''); }); }); }