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' );
40 // Also listen for other events in case $input was
41 // already focused when the events were bound
42 .bind( 'focus drop keydown paste', function( e
) {
43 if ( $input
.hasClass( 'placeholder' ) ) {
44 // Support for drag&drop in Firefox
45 if ( e
.type
== 'drop' && e
.originalEvent
.dataTransfer
) {
46 this.value
= e
.originalEvent
.dataTransfer
.getData( 'text/plain' );
50 $input
.removeClass( 'placeholder' );
54 // Blank on submit -- prevents submitting with unintended value
56 $( this.form
).submit( function() {
57 // $input.trigger( 'focus' ); would be problematic
58 // because it actually focuses $input, leading
59 // to nasty behavior in mobile browsers
60 if ( $input
.hasClass( 'placeholder' ) ) {
63 .removeClass( 'placeholder' );