HTML5 Input Placeholders – IE6+

Place holders are awesome but were only introduced with HTML5 meaning older browsers don’t support them by default. This is a great table showing browser support for placeholders. The biggest problem is that we need to consider is IE9 and older, fortunately with JQuery we can workaround this problem. This post describes the solution that I use.

Implementation

My solution uses Mathias’ solution on github. See online demo.

Add reference to JQuery (Requires jQuery 1.6+) 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Download and add reference to jquery.placeholder.js

<script src="/js/jquery.placeholder.js"></script>

add the following to your form page:

<script>
$(function() {
	$('input, textarea').placeholder();
});
</script>
<style>
input, textarea { color: #000; }
.placeholder { color: #aaa; }
</style>
<input type="text" name="name" placeholder="e.g. John Doe">
<input type="email" name="email" placeholder="e.g. address@example.ext">

notes

  • requires jquery 1.6+. for an older version of this plugin that works under jquery 1.4.2+, see v1.8.7.
  • works in all a-grade browsers, including ie6.
  • automatically checks if the browser natively supports the html5
Advertisements