Skip to content

Instantly share code, notes, and snippets.

@westonruter
Created February 22, 2010 19:21
Show Gist options
  • Save westonruter/311373 to your computer and use it in GitHub Desktop.
Save westonruter/311373 to your computer and use it in GitHub Desktop.
jQuery fallback implementation of HTML5 placeholder attribute
if(!jQuery('<input PLACEHOLDER="1" />')[0].placeholder){ //Uppercase attr for IE
jQuery(':input[placeholder]').each(function(){
var $this = $(this);
if(!$this.val()){
$this.val($this.attr('placeholder'));
$this.addClass('input-placeholder');
}
}).live('focus', function(e){
var $this = $(this);
if($this.hasClass('input-placeholder')){
$this.val('');
$this.removeClass('input-placeholder')
}
}).live('blur', function(e){
var $this = $(this);
if(!$this.val()){
$this.addClass('input-placeholder');
$this.val($this.attr('placeholder'));
}
});
}
Copy link

ghost commented Jul 19, 2010

Thanks for the great script!

One issue I found was with FireFox is that it retains the placeholder text after a page refresh, as if it were something the user entered. Adding this line after var $this = $(this) should fix it:

if( $this.val() == $this.attr('placeholder') ) {$this.val('');}

@zinkkrysty
Copy link

This doesn't work if you submit the form with no entered values. Should reset when submitting form.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment