How to make form placeholder text appear in Internet Explorer
One of the simplest things that HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field when the page loads.
<input type="text" placeholder="Type comments here">
When you click on the input field and start typing, the placeholder text disappears... but what about IE?
In a recent design it all looked cool (see pic) - I'd dispensed with labels for my input form and only had placeholder text. This was to save space and make it fit for mobile consumption. But then on testing in IE8 I remembered that it doesn't support placeholder text!!
Two choices, a re-design with form labels (ugly) or force IE with some JavaScript to rewrite the input field.
Obviously I'm not the first to have a problem, and the solution is already well established.
Over at www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html there is a great jQuery fix by Nico Hagenburger. If you go to github you get a nice fork from the original that works for all eventualities (https://gist.github.com/akeemw/5114232)
All you need do is put a link to jquery at google code (in your header) like so:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
and then stuff all the code from the github link into a new .js text file (I called mine form.js)
and then add the following at the bottom just before the closing body tag:
<script type="text/javascript" src="form.js"></script>
</body>
</html>
When you click on the input field and start typing, the placeholder text disappears... but what about IE?
In a recent design it all looked cool (see pic) - I'd dispensed with labels for my input form and only had placeholder text. This was to save space and make it fit for mobile consumption. But then on testing in IE8 I remembered that it doesn't support placeholder text!!
Two choices, a re-design with form labels (ugly) or force IE with some JavaScript to rewrite the input field.
Obviously I'm not the first to have a problem, and the solution is already well established.
Over at www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html there is a great jQuery fix by Nico Hagenburger. If you go to github you get a nice fork from the original that works for all eventualities (https://gist.github.com/akeemw/5114232)
All you need do is put a link to jquery at google code (in your header) like so:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
and then stuff all the code from the github link into a new .js text file (I called mine form.js)
and then add the following at the bottom just before the closing body tag:
<script type="text/javascript" src="form.js"></script>
</body>
</html>
Comments
Post a Comment