26 Mar 2014

html5 placeholder w IE7 i IE8

// 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
}