Input Element Placeholder Attribute in IE

HTML5 introduced the placeholder attribute for the input tag. However, it doesn’t work in IE 9 and below.

In this tutorial, I will be taking advantage of the fact that  setting the placeholder attribute on an input element can be read as the “value attribute” of that element. So, here is a solution that uses Javascript/Jquery.

IE Placeholder Fix

<input id="searchKey" type="text" name="searchKey" placeholder="Search" />

Here is the javascript:

jQuery(document).ready(function($) {
	var originalValue;
	if($.browser.msie){
		originalValue = $('#searchKey').attr('value');
	}else{
		originalValue = $('#searchKey').attr('placeholder');
	}
	var placeAttr = $('#searchKey').attr('placeholder');

	$('#searchKey').focus(function() {
			$('#searchKey').attr('placeholder', '');
			if($.browser.msie && $('#searchKey').attr('value') == originalValue){
				$('#searchKey').attr('value', ''); 
			}
		});
	$('#searchKey').blur(function(){
		$('#searchKey').attr('placeholder', placeAttr);
		if($.browser.msie && ($('#searchKey').attr('value') == "" || $('#searchKey').attr('value') == originalValue)){
			$('#searchKey').attr('value', originalValue);
		}
	});
});

I’ve tested the placeholder ie fix in IE 9- IE 7 ( firefox and chrome also work).

Input Element Placeholder Attribute Fix Demo