HTML5 added some new features for input and textarea fields. One is inspired by Safari’s search box: placeholder This adds an default text if the textfield is empty:
<input type="text" placeholder="Fill me …">
jQuery Fix for All Browsers
Currently the placeholder works with the latest Webkit (Safari nightly build) and Chrome only. In Safari 4.0 placeholders won’t appear in textareas. For all other browsers, the following short jQuery fix will help you. $('[placeholder]') selects all HTML elements with an placeholder attribute (textarea, input, and other elements).
$('[placeholder]'
).focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder'
)) {
input.val(''
);
input.removeClass('placeholder'
);
}
}).blur(function() {
var input = $(this);
if (input.val() == ''
|| input.val() == input.attr('placeholder'
)) {
input.addClass('placeholder'
);
input.val(input.attr('placeholder'
));
}
}).blur();
Don’t forget the last blur() call. This one initializes the fields.
$('[placeholder]'
).parents('form'
).submit(function() {
$(this).find('[placeholder]'
).each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder'
)) {
input.val(''
);
}
})
});
You’ll find the whole code at github.
CSS Styling
While the placeholder is visible, the text field gets an additional .placeholder class. To make it look beautifully add a some CSS for a grey placeholder text:
.placeholder
{
color: #aaa;
}
Result
Here’s the result—it’s tested and works in Safari, Firefox, Opera, Chrome and even Internet Explorer:
CSS Styling of the HTML5 Attribute Placeholder
But there’s one more thing: Webkit users can even style their placeholder text. There’s an temporarily pseudo element selector called -webkit-input-placeholder:
::-webkit-input-placeholder
{
color: red;
font-weight: bold;
}
This one is pure HTML5 and CSS. You should see bold red text for the placeholders (left side) and normal black text if there’s user input (right side). It works in Webkit and Chrome only and partially in Safari:
