2 * HTML5 placeholder emulation for jQuery plugin
4 * This will automatically use the HTML5 placeholder attribute if supported, or emulate this behavior if not.
6 * @author Trevor Parscal <tparscal@wikimedia.org>
7 * @author Krinkle <krinklemail@gmail.com>
12 $.fn.placeholder = function() {
14 return this.each( function() {
16 // If the HTML5 placeholder attribute is supported, use it
17 if ( this.placeholder && 'placeholder' in document.createElement( this.tagName ) ) {
21 var placeholder = this.getAttribute('placeholder');
24 // Show initially, if empty
25 if ( this.value === '' || this.value == placeholder ) {
26 $input.addClass( 'placeholder' ).val( placeholder );
30 // Show on blur if empty
32 if ( this.value === '' ) {
33 this.value = placeholder;
34 $input.addClass( 'placeholder' );
36 $input.removeClass( 'placeholder' );
42 if ($input.hasClass('placeholder')) {
44 $input.removeClass( 'placeholder' );
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') ) {
56 .removeClass( 'placeholder' );