HTML5 Placeholder jQuery Fix
I was working with placeholder text for the input fields on a recent project and I needed to make sure that the text would appear in all browsers. I had to use a old technique that many of you might be familiar with:
<input type="text" name="first_name" value="First Name" onfocus="if(this.value == 'First Name') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'First Name'; }" /> |
That technique uses inline JavaScript to check if the value of the input field matches the default placeholder text. It works in every browser but it does require a lot of extra code on each of your input fields. It would also submit the placeholder text as the value of the input so you would have to place some validation to remove any value that matched the placeholder text.
All of those issues are solved in HTML5 with the placeholder parameter. Now your input tag would just look like this:
<input type="text" name="first_name" placeholder="First Name" /> |
That does the exact same thing and will not submit a value for the empty input fields.
This HTML5 feature is supported in the following browsers:
Firefox: 3.7+
Safari: 4.0+
Chrome: 4.0+
Opera: 11.0+
iPhone: 4.0+
Since it doesn’t work in IE and older browsers, you need to use something like this jQuery fix:
<script type="text/javascript"> /* <![CDATA[ */ $(function() { var input = document.createElement("input"); if(('placeholder' in input)==false) { $('[placeholder]').focus(function() { var i = $(this); if(i.val() == i.attr('placeholder')) { i.val('').removeClass('placeholder'); if(i.hasClass('password')) { i.removeClass('password'); this.type='password'; } } }).blur(function() { var i = $(this); if(i.val() == '' || i.val() == i.attr('placeholder')) { if(this.type=='password') { i.addClass('password'); this.type='text'; } i.addClass('placeholder').val(i.attr('placeholder')); } }).blur().parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var i = $(this); if(i.val() == i.attr('placeholder')) i.val(''); }) }); } }); /* ]]> */ </script> |
First thing it does is check whether the placeholder parameter is supported. If it is, it will do nothing. If it isn’t it will perform a few things to emulate the HTML5 placeholder parameter. In order to style how your placeholder text appears you can use the following CSS:
.placeholder { color: #aaa; } |
The fix will also switch the input type to “text” for all password inputs so that your placeholder text will not appear as a bunch of black dots. The final part of the fix will empty the value of the input field if it contains the placeholder text so that it is not submitted as a real value in your form.
Since this is a jQuery fix, you need to make sure that you have included a link to jQuery between your head tags:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> |
With everything in place, you now have a backwards compatible way of using the new HTML5 placeholder parameter so that all of your visitors have the same experience when they are on your site.
Resources:
http://www.webgeekly.com/tutorials/jquery/creating-a-cross-browser-form-field-placeholder/
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
Great work man i ll use this HTML5 Placeholder jQuery.
Very helpful! Cheers mate
What about using something like the Webshims library?
http://afarkas.github.com/webshim/demos/
Great work. Also implement in my site.
Thanks For Sharing
I’m getting an error in IE for this line:
this.type=’password’;
“Could not get the type property. This command is not supported.”
What version of IE?
This solves my problem!! hope you will share many insights about html5 in future, i do run into problem with html5. nice to stumble upon your site.
A thousand thank yous! I’ve tried about 10 scripts that claim to do this, but none of them but yours worked in IE (and me the JS/Jquery noob). Implemented!
Works wonderfully. Thank you. The simplest, cleanest and most useful fix I have seen.