The placeholder Attribute

Firefox 4+	Safari 4+	Safari iOS 4+	Chrome 10+	Opera 11.10+	IE 10+	Android 2.3+

The Low Down

The placeholder attribute places text inside an input box, usually in a light gray color, as a placeholder, indicating what type of content is expected from the user.

• The text remains while the input has no value, even when the form control receives focus. As soon as the input takes on value (from typing or any other means), the placeholder text is removed.
• Placeholders should be treated like a “hint.” They are not a replacement for <label> (accessibility) or the title attribute (longer advisory text).
• The spec says placeholder should only work on text, search, url, tel, email, passwordand number input types. Browsers that support the placeholder attribute but not all form input types such as color, treat those unsupported input types as “text”, and therefore display the placeholder.
• Android 4.0 and 4.1 and webview did not show the placeholder attribute on number. Even though the spec doesn’t require it, all other browsers do.
• Safari 4 and Opera 11.5 supported it on inputs but not textareas.
• Browsers with no support show nothing.
• jQuery plugin for fallback
• Use ::-webkit-input-placeholder, :-moz-placeholder for Firefox 18, ::-moz-placeholder and :-ms-input-placeholder to style the placeholder text, which by default is light grey in color.
• The placeholder text disappeared on focus in Safari 5.1 and Chrome 16. This original behavior, which demonstrated rather bad UX, since when the field first comes into focus is when the user needs the “hint” the most, was changed: now the placeholder text disappears when the value of the input or textarea is no longer null.