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>
A neat solution - thanks Nico!!
