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' );