The Low Down
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
titleattribute (longer advisory text).
- The spec says placeholder should only work on
text, search, url, tel, email, passwordand
numberinput 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
::-webkit-input-placeholder, :-moz-placeholderfor Firefox 18,
:-ms-input-placeholderto 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.