HTML5 Placeholder Attribute
Nov 8th, 2011 » 9 comments
A guide to using the attribute, and support it for older browsers.
Placeholder
Placeholder text is a short example or hint text that is shown in a form field when the field is unfocused and has no input from the user. Designers like to use placeholders to make forms smaller, as smaller things appear to be simpler.
While the adding & removing of placeholder text on field focus has long been accomplished through JavaScript, there is now a placeholder attribute in the HTML5 working draft. Most modern browsers support the placeholder attribute and will automatically add/replace the placeholder text. They will also automatically exclude the placeholder from being sent when the form is submitted. However, versions of Internet Explorer prior to IE10 do not support the attribute.
<input type='text' name='email' placeholder='Email Address'/>
Supporting Older Browsers
It is very easy to detect placeholder support (or lack of) and duplicate the effect with a bit of JavaScript for older browsers.
<script>
// placeholder polyfill
$(document).ready(function(){
function add() {
if($(this).val() == ''){
$(this).val($(this).attr('placeholder')).addClass('placeholder');
}
}
function remove() {
if($(this).val() == $(this).attr('placeholder')){
$(this).val('').removeClass('placeholder');
}
}
// Create a dummy element for feature detection
if (!('placeholder' in $('<input>')[0])) {
// Select the elements that have a placeholder attribute
$('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add);
// Remove the placeholder text before the form is submitted
$('form').submit(function(){
$(this).find('input[placeholder], textarea[placeholder]').each(remove);
});
}
});
</script>
To enable styling, this script adds a class of 'placeholder' while the placeholder text is being displayed.
Styling The Placeholder
Since placeholder has yet to be standardized, styles are applied through vendor-specific prefixes. Even though Opera 11 supports the placeholder attribute, it does not offer any way to style it at this time. It's a good idea to go ahead and specify at least the color property to normalize the color between browsers. Otherwise, a default style will be provided which will vary from browser to browser.
::-webkit-input-placeholder { color:#999; }
:-moz-placeholder { color:#999; }
:-ms-input-placeholder { color:#999; }
.placeholder { color:#999; }
Unfortunately, the rules can not be combined into a single statement as a browser will not recognize vendor-specific selectors from other browser makers, resulting in an invalid rule that prevents the styles from being applied. John Catterfeld compiled a nifty list of CSS properties can be applied to placeholders.
Hey You
Follow me on Twitter, Github, or RSS. Why should you? I'm meticulous and have a lot of free time. Sometimes good things come out of that.
Comments
michael6 months agoReply
//Bind these by hardcoding them or if you're using JQuery do something fancy
function SwapOnFocus(obj) {
if (obj.value == obj.title) {
obj.value = '';
obj.class = 'active'; /* JQuery has really nice class swaps or you could define a var baseInputClass and add to that here */
}
}
function SwapOnBlur(obj) {
if (obj.value == obj.title || obj.value == '') {
obj.value = obj.title;
obj.class = '';
}
}
if (!('placeholder' in $('<input>')[0]))
input.placeholder, textarea.placeholder{ color:#999; }