HTML5’s placeholder Attribute

Discussion

1. Fabian Beiner

   I would use MooTools OverText instead of setting it as value… My example: http://jsfiddle.net/fabian/8Zacd/ – just a quick showcase.
2. Adam Meyer

   You can apply css to it via input::-webkit-input-placeholder – But anyone know how to do this for firefox/opera?
• Roberto

  for mozilla:
  :-moz-placeholder
3. Christoph Pojer

   Note that I used to have problems with placeholder in Safari 4. It reports to support placeholder but it really doesn’t.
4. Christoph Pojer

   @Adam I’d suggest using blur/focus to add/remove a class with the appropriate styles. There is an ongoing discussion on the naming of the property for firefox
5. Can Berkol

   @Christoph Pojer: thanks for the helpful extra info :)
6. Paul de Vries

   Thanks bro! HTML5 & Mootools FTW!!!

   p.s. is it an idea for the mootools core to create the HTML5 elements on the fly for IE?
7. Kamil Skrzypiński

   You can check placeholder support in web browsers here: http://www.fanatical.pl/wp-content/uploads/2010/08/formularz.html

   Chrome and Safari – OK.
8. David Bushell

   Don’t forget to clear the DIY placeholder on form submit otherwise your users will get confusing validation messages! I don’t know MooTools, but jQuery might look like this:

   $('form input[type="submit"]').bind('click', function() {
   	$('form input[type="text"]').each(function() {
   		var $field = $(this);
   		if ($field.val() == $field.attr('placeholder')) {
   			$field.val('');
   		}
   	});
   	return true;
   });
9. chris

   Support for the placeholder attribute is very lacking from what i’ve seen.
• David Walsh

  While that may be true, there’s nothing wrong with taking advantage of placeholder now!
10. Benjamin "balupton" Lupton

    Your javascript placeholder workaround would still send the placeholder value if the form is submitted, instead of sending a empty string. jQuery Sparkle contains another graceful script for this with form support:
    http://www.balupton.com/sandbox/jquery-sparkle/demo/#sparkle-demo-hint
11. Ben Smithett

    Any idea if it’s possible to style the placeholder text? Currently it’s a default grey in most browsers, but if you style your inputs that can quickly become unreadable.

    Eg if I style my inputs to have a light grey background, or if the input text is styled to be the same light grey…
12. Christoph Pojer

    @ben just read the comments above.
• Ben Smithett

  How on earth did I miss that? Thanks :)
13. iams

    I’m using the newest version of firefox and the demo doesn’t work, just an empty text box
• David Walsh

  Firefox has yet to implement placeholder.
• iams

  ahh, thanks
  figured they’d be ahead of the curve

  html5 is a great thing unfortunately it’s going to take some time for the browsers (and people updating their browsers) to catch up
• Wil Moore III

  It’s coming in Firefox 3.7
14. Christoph Pojer

    I finally got around to release my Form.Placeholder implementation: http://github.com/cpojer/mootools-form-placeholder
15. Giovanni Cappellotto

    I like placeholders, but what about password fields placeholders?
    IMHO it doesn’t make sense to hide also the placeholder, browsers should show the placeholder and hide the password.
16. Dev Guy

    I used the html5 placeholder attributes, it was surprisingly easy. The only thing that really bugs me is compatibility with IE6. I used Modernizr to do all the feature checks, now it’s working really good.
17. YaNIV

    in the article you say the place holder will disappear on focus
    in your demo – it disappears on keydown.
    is there a way in HTML5 to get that functionality as well or i need to write a JS for it.
18. Ryan

    Thanks for the tip. I wound up using something a little different. Instead of putting text in the field I used jQuery to append the value of the placeholder attribute into a paragraph tag right before the input field in the DOM.

    The $.support snippet got the ball rolling.
19. Devs @ Dentist Etc

    Your code refers to firstNameBox and then searchBox, you may want t fix that.
20. dnc

    So now when you have placeholder attribute, instead to just write javascript function that handles placeholder text you have to write both, the placeholder attribute/value (in case your browser supports it) and javascript placeholder handling (otherwise). On the top of that you need to check if the browser supports it which additionally complicates your presentation logic. Great!
21. Lasse Bunk

    Helped me – thanks! :-)
22. ironarm

    Makes me laugh that people have to use a library for something this simple; monkeys. Do it yourself and learn. You should only use libraries for complex things that you can handle instead of using libraries for everything. Even then you should try it at least once. I won’t write my own calendar, but i’ll definitely write my own placeholder code, for god sake.
23. Rob Volk

    I wrote a jQuery plugin to support placeholder text on older browsers. It’s hosted on GitHub and you can download the latest here: https://github.com/robvolk/jQuery.InputHints
    Example code and demo: http://robvolk.com/jquery-form-input-hints-plugin/
24. Haseeb Ahmad Basil

    for opera -o-placeholder
25. Ted Stevenson

    Dave – Thanks for this. You have come to my rescue several times now. It’s appreciated.
26. Adam Moore

    Good article, but a lot of things are not clarified here, I would recommend to read this one to know more about it: http://basicuse.net/articles/pl/textile/html_css/html5_placeholder_attribute_with_cross_browser_support
27. Marcin

    placeholder is a problem on safari, Maxthon, android browser … maybe in feature it dont be a problem,