Skip to content

Instantly share code, notes, and snippets.

@aramk
Created June 28, 2012 14:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aramk/3011743 to your computer and use it in GitHub Desktop.
Save aramk/3011743 to your computer and use it in GitHub Desktop.
Add placeholder support to all browsers
// Derived from http://www.cssnewbie.com/example/placeholder-support/
// I needed to capture both "text" and "email" input types.
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
var sel = "input[type='text'],input[type='email']";
if(!$.support.placeholder) {
var active = document.activeElement;
$(sel).focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(sel).blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$('input.hasPlaceholder').val('');
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment