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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: