Implement placeholders in IE8 & 9 (and other older browsers) with jQuery

HTML5 saw the introduction of the very useful placeholder attribute for input elements, but it’s not supported in Internet Explorer before version 10. There are still a number of people out there with version 8 & 9 but fortunately there are some ways to support placeholders in these older browsers with Javascript.

The old way

Before placeholders, I used to toggle default text on and off using Javascript and used an alternative field for dealing with password fields (here and here). You could still use these older methods for browsers that don’t support placeholders but I found a much simpler way to do it today.

Implementing placeholders in older browsers

I don’t claim any credit for the code on this page, I’ve just assembled it together and tested it on IE8 & IE9 and made sure it doesn’t run on modern browsers.

The testing for placeholders code comes from here.
The jQuery placeholder code comes from here.

You may want to change it to suit your own use-cases or other functions you might have for detecting whether placeholders are supported (e.g. with Modernizr) or use vanilla Javascript instead of jQuery.

function placeholderIsSupported() {
	var test = document.createElement('input');
	return ('placeholder' in test);
}

if(!placeholderIsSupported()) {
	$('[placeholder]').focus(function () {
		var input = $(this);
		if (input.val() == input.attr('placeholder')) {
			input.val('');
			input.removeClass('placeholder');
		}
	}).blur(function () {
		var input = $(this);
		if (input.val() == '' || input.val() == input.attr('placeholder')) {
			input.addClass('placeholder');
			input.val(input.attr('placeholder'));
		}
	}).blur();
}

Note that the password placeholder will still be masked and will not show whatever text you have put in there as a placeholder (.e.g placeholder="password").