Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save samgro/823300 to your computer and use it in GitHub Desktop.
Save samgro/823300 to your computer and use it in GitHub Desktop.
jQuery.placeholder = function() {
$('[placeholder]').focus(function() {
var input = $(this);
if (input.hasClass('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() === '') {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.hasClass('placeholder')) {
input.val('');
}
});
});
// Clear input on refresh so that the placeholder class gets added back
$(window).unload(function() {
$('[placeholder]').val('');
});
};
// If using AJAX, call this on all placeholders after submitting to
// return placeholder
jQuery.fn.addPlaceholder = function() {
return this.each(function() {
var input = $(this);
input.addClass('placeholder');
input.val(input.attr('placeholder'));
});
};
@KingIsulgard
Copy link

How do I use it?
Which other scripts do I have to include and do I need to use a onload function?

@samgro
Copy link
Author

samgro commented Mar 10, 2011

It's straight up jQuery, no dependencies other than jQuery. Just call $.placeholder() in your $(document).ready function on any pages with placeholders.

@zelimir83
Copy link

Works fantastic, thanks man!

@ssbalakumar
Copy link

Thanks for a fix works nicely!..

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