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
50 this.form
&& $( this.form
).submit( function() {
51 // $input.trigger( 'focus' ); would be problematic
52 // because it actually focuses $input, leading
53 // to nasty behavior in mobile browsers
54 if ( $input
.hasClass('placeholder') ) {
57 .removeClass( 'placeholder' );