[Summary view] [Print] [Text view]

   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 <[email protected]>
  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 || (jQuery.browser.msie && jQuery.browser.version == 10)) {
  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  })(jQuery);