Tuesday, March 11, 2014

Placeholder attribute in HTML5 not showing on IE 9 and below (Watermark feature)

Given this html markup for input text element for accepting email value:
 <input type="email" name="inEmail" id="inEmail" required="required" placeholder="yourname@domain.com" />  
The place holder shows correctly on firefox and google chrome but not on IE 9. After searching the internet, I found placeholder framework that will fix place holders in IE 9 and below.
The steps are as follows:
1. Download the placeholder script here: Placeholder js
2. Add reference to jquery and placeholder on your html file.
 <script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>  
 <script src="placeholders.jquery.min.js" type="text/javascript"></script>  
IE demo:
That's it... :)


Post a Comment