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>
13 $.fn
.placeholder = function() {
15 return this.each( function() {
17 // If the HTML5 placeholder attribute is supported, use it
18 if ( this.placeholder
&& 'placeholder' in document
.createElement( this.tagName
) ) {
22 var placeholder
= this.getAttribute( 'placeholder' );
25 // Show initially, if empty
26 if ( this.value
=== '' || this.value
=== placeholder
) {
27 $input
.addClass( 'placeholder' ).val( placeholder
);
31 // Show on blur if empty
33 if ( this.value
=== '' ) {
34 this.value
= placeholder
;
35 $input
.addClass( 'placeholder' );
37 $input
.removeClass( 'placeholder' );
43 if ( $input
.hasClass( 'placeholder' ) ) {
45 $input
.removeClass( 'placeholder' );
49 // Blank on submit -- prevents submitting with unintended value
51 $( this.form
).submit( function() {
52 // $input.trigger( 'focus' ); would be problematic
53 // because it actually focuses $input, leading
54 // to nasty behavior in mobile browsers
55 if ( $input
.hasClass( 'placeholder' ) ) {
58 .removeClass( 'placeholder' );