Mounir Lamouri's Blog

Placeholder attribute in Firefox 3.7 alphas

By Mounir Lamouri on March 19, 2010 - 00:56

The placeholder attribute for input and textarea elements is available on Firefox 3.7 since developer preview 3.7a2.

The placeholder attribute is a new attribute from HTML5 Forms specifications. The placeholder text is showed as a hint on input and textarea elements when the element is empty and not focused. This kind of behavior is already used by a lot of websites and even by Firefox user interface ¹.
If you are a web developer and you want to use the placeholder attribute, you should know you can easily identify if the UA knows about the placeholder attribute with this simple code:

if(!"placeholder" in document.createElement("input")) {
  // your fallback
}

This way, you can have a sane fallback until you consider the placeholder attribute is supported enough to remove the fallback.

At the moment, there are still some minor issues about the placeholder like the style for Aero (Windows Vista and 7) ² and some optimizations ³. However, there is a bigger issue related to the ability to style the placeholder ⁴. Indeed, at the moment, there is no specification about the placeholder style customization. Webkit have decided to use a CSS pseudo-element "-web-input-placeholder" but unfortunately, no consensus has been reached.

To know if your browser supports the placeholder attribute, just look at the input field below. If you see "tulip orchid" that means your browser support the placeholder attribute correctly. If you see only "tulip" that means you browser has an issue with new lines in placeholder text (WebKit has this issue ⁵). If you see nothing that means your browser doesn't support placeholder at all.

This is my first contribution for the HTML5 Forms implementation in Gecko/Firefox. Next steps may be the constraint validation API, autofocus and other small stuff.