// set placeholder values
$('[placeholder]').each(function() {
if ($(this).val() == '') // if field is empty
{
$(this).val($(this).attr('placeholder'));
}
});
// focus and blur of placeholders
$('[placeholder]').focus(function() {
if ($(this).val() == $(this).attr('placeholder')) {
$(this).val('');
$(this).removeClass('placeholder');
}
}).blur(function() {
if ($(this).val() == '' || $(this).val() == $(this).attr('placeholder')) {
$(this).val($(this).attr('placeholder'));
$(this).addClass('placeholder');
}
});
// remove placeholders on submit
$('[placeholder]').closest('form').submit(function() {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr('placeholder')) {
$(this).val('');
}
})
});
Należy oczywiście sprawdzić czy placeholder jest wspierane przez przeglądarkę.
if (!("placeholder" in document.createElement("input"))) {
odpalPlaceHolder(); // tutaj odpalamy funkcje która obsługuje placeholder
}
Można również użyć modernize jeżeli oczywiście używamy już w projekcie.
if(!Modernizr.input.placeholder) {
// custom placeholder code
}