Skip to content

Instantly share code, notes, and snippets.

@stanistan
Created February 21, 2011 14:21
Show Gist options
  • Save stanistan/837108 to your computer and use it in GitHub Desktop.
Save stanistan/837108 to your computer and use it in GitHub Desktop.
Checks if the browser supports the HTML placeholder spec, if not, replaces it with the 'placeholder' attribute. Works in Chrome. IE7/IE8. Assuming it works in FF/Opera.
/*
Placehoder Plugin for jQuery By Stan Rozenraukh
Usage:
$('input').placeholder();
or
$('input').placeholder({
active: 'red',
blurred: 'green'
});
*/
$.fn.placeholder = function(options) {
var settings = {
'active' : '#000',
'blurred' : '#ccc'
};
return this.each(function() {
if (options) {
$.extend(settings, options);
}
if (!('placeholder' in document.createElement('input'))) {
var $field = $(this),
$form = $(this).closest('form');
$field.focus(function() {
if ($field.val() == $field.attr('placeholder')) $field.val('').css('color', settings.active);
}).blur(function() {
if ($field.val() == '') $field.val($field.attr('placeholder')).css('color', settings.blurred);
});
if ($form) {
$form.submit(function() {
if ($field.val() == $field.attr('placeholder')) $field.val('');
});
}
$field.blur();
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment