HTML5’s placeholder Attribute

By  on  

HTML5 has introduced many features to the browser;  some HTML-based, some in the form of JavaScript APIs, but all of them useful.  One of my favorites if the introduction of the placeholder attribute to INPUT elements.  The placeholder attribute shows text in a field until the field is focused upon, then hides the text.  You've seen this technique a billion times with JavaScript, but native HTML5 support is even better!

The HTML


You'll notice that all you need to do is add a placeholder attribute with the generic text of your choice.  Nice that you don't need JavaScript to create this effect, huh?

Checking for Placeholder Support

Since placeholder is a new capability, it's important to check for support in the user's browser:

function hasPlaceholderSupport() {
	var input = document.createElement('input');
	return ('placeholder' in input);
}

If the user's browser doesn't support the placeholder feature, you will need to employ a fallback with MooTools, Dojo, or the JavaScript toolkit of your choice:

/* mootools ftw! */
var firstNameBox = $('first_name'),
	message = firstNameBox.get('placeholder');
firstNameBox.addEvents({
	focus: function() {
		if(firstNameBox.value == message) { searchBox.value = ''; }
	},
	blur: function() {
		if(firstNameBox.value == '') { searchBox.value = message; }
	}
});

placeholder is another great addition to the browser and replaces the oldest snippet of JavaScript in the book! You can event style HTML5 placeholders!

Recent Features

Incredible Demos

  • By
    CSS Text Overlap

    One of the important functions of CSS is to position elements. Margin, padding, top, left, right, bottom, position, and z-index are just a few of the major players in CSS positioning. By using the above spacing...

  • By
    MooTools Text Flipping

    There are lots and lots of useless but fun JavaScript techniques out there. This is another one of them. One popular April Fools joke I quickly got tired of was websites transforming their text upside down. I found a jQuery Plugin by Paul...

Discussion

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

  2. 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. Note that I used to have problems with placeholder in Safari 4. It reports to support placeholder but it really doesn’t.

  4. @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. @Christoph Pojer: thanks for the helpful extra info :)

  6. 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. 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. 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. Support for the placeholder attribute is very lacking from what i’ve seen.

    • While that may be true, there’s nothing wrong with taking advantage of placeholder now!

  10. 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. 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. @ben just read the comments above.

  13. iams

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

    • 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

    • It’s coming in Firefox 3.7

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

  15. 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. 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. 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. 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. 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. 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. for opera -o-placeholder

  25. 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. placeholder is a problem on safari, Maxthon, android browser … maybe in feature it dont be a problem,

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!