In my travels for Vurve, and last year while at Netflix, I'm running into the new
placeholder attribute for
INPUT tags. Placeholders are sweet; they supply the reader with a hint about what he's supposed to enter in a text field, allowing for much tighter design. Code for placeholders looks something like this:
<input type="text" placeholder="username" /> <input type="text" placeholder="e-mail" /> <input type="password" placeholder="password1" /> <input type="password" placeholder="password2" />
Sadly, placeholders only work with the most recent browsers, which do NOT include Firefox less than version 4 or IE less than version 9.
Here's a standalone script that:
SPANtags, sets their
innerHTMLto whatever's in the placeholder, and inserts them immediately before their
Yes. Dave Sparks did it over on kamikazimusic.com with jQuery and Modernizr and Dave Dorward posted a non-library-based solution on stackoverflow in August of 2010. I wrote this 1) for fun, 2) because I tend not to require libraries unless I absolutely, positively must, and 3) because I don't like solutions that mess around with the
VALUE attribute or add a
LABEL to the DOM.
(has a prefilled value; delete to see the placeholder)
When you're creating new
INPUT boxes on the fly, you should be able to do this:
... any time after page load.
Yes, I'm seeing the delay between page load and placeholders appearing; this is because of my other third-party scripts (Disqus, Delicious, Twitter, and Delicious) which are taking a while. As long as it's being called after your last
INPUT tag, it's probably safe to fire it off immediately instead of waiting for page load; to do that, you'd remove this line:
$.f.listen($.w, 'load', $.f.init);
... and substitute this:
If it looks like it will be useful, feel free to fork Input Placeholders For Everyone on GitHub. As always, have fun, and please let me know how it works.