resources/jquery/jquery.placeholder.js

   1 /**
   2  * HTML5 placeholder emulation for jQuery plugin
   3  *
   4  * This will automatically use the HTML5 placeholder attribute if supported, or emulate this behavior if not.
   5  *
   6  * @author Trevor Parscal <tparscal@wikimedia.org>
   7  * @author Krinkle <krinklemail@gmail.com>
   8  * @version 0.2.0
   9  * @license GPL v2
  10  */
  11
  12 $.fn.placeholder = function() {
  13
  14         return this.each( function() {
  15
  16                 // If the HTML5 placeholder attribute is supported, use it
  17                 if ( this.placeholder && 'placeholder' in document.createElement( this.tagName ) ) {
  18                         return;
  19                 }
  20
  21                 var placeholder = this.getAttribute('placeholder');
  22                 var $input = $(this);
  23
  24                 // Show initially, if empty
  25                 if ( this.value === '' || this.value == placeholder ) {
  26                         $input.addClass( 'placeholder' ).val( placeholder );
  27                 }
  28
  29                 $input
  30                         // Show on blur if empty
  31                         .blur( function() {
  32                                 if ( this.value === '' ) {
  33                                         this.value = placeholder;
  34                                         $input.addClass( 'placeholder' );
  35                                 } else {
  36                                         $input.removeClass( 'placeholder' );
  37                                 }
  38                         } )
  39
  40                         // Hide on focus
  41                         .bind( 'onfocus ondrop ondragdrop', function() {
  42                                 if ($input.hasClass('placeholder')) {
  43                                         this.value = '';
  44                                         $input.removeClass( 'placeholder' );
  45                                 }
  46                         } );
  47
  48                 // Blank on submit -- prevents submitting with unintended value
  49                 this.form && $( this.form ).submit( function() {
  50                         // $input.trigger( 'focus' ); would be problematic
  51                         // because it actually focuses $input, leading
  52                         // to nasty behavior in mobile browsers
  53                         if ( $input.hasClass('placeholder') ) {
  54                                 $input
  55                                         .val( '' )
  56                                         .removeClass( 'placeholder' );
  57                         }
  58                 });
  59
  60         });
  61 };