1/** 2 * Allows text inputs to display a placeholder message until it gets focus, at which point the input 3 * is set to empty. 4 * 5 * This simulated the placeholder attribute in html5. 6 * http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute 7 * 8 * @copyright Clock Limited 2010 9 * @license http://opensource.org/licenses/bsd-license.php New BSD License 10 * @author Paul Serby <paul.serby@clock.co.uk> 11 */ 12(function ($) { 13 $.fn.placeholder = function (text) { 14 15 return this.each(function () { 16 17 var 18 context = $(this), 19 placeholderText, 20 nativePlaceholderSupport = ('placeholder' in document.createElement('input')); 21 22 function onBlur(event) { 23 checkIfEmpty($(event.target)); 24 } 25 26 function checkIfEmpty() { 27 if (context.val() === '') { 28 if (context.attr('type') === 'password') { 29 try { 30 context.attr('type', 'text'); 31 } catch(e) { 32 return false; 33 } 34 } 35 context.val(placeholderText); 36 context.addClass('ui-placeholder'); 37 } 38 } 39 40 function onFocus(event) { 41 context.removeClass('ui-placeholder'); 42 if (context.val() === placeholderText) { 43 context.val(''); 44 } 45 } 46 47 if (text === undefined) { 48 placeholderText = $(this).attr('placeholder'); 49 } else { 50 placeholderText = text; 51 } 52 53 if (!nativePlaceholderSupport) { 54 checkIfEmpty(context.blur(onBlur).focus(onFocus)); 55 context.parents('form').submit(function(event) { 56 if (context.val() === placeholderText) { 57 context.val(''); 58 } 59 }); 60 } else { 61 context.attr('placeholder', placeholderText); 62 } 63 }); 64 }; 65 66})(jQuery); 67 68jQuery(document).ready(function(){ 69 jQuery('input[type=text], textarea').placeholder(); 70});