HTML5 Placeholder Input Fields Fixed with jQuery

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.

Update: Robin mentioned in the comments, that this would post the placeholder values to the form action script. Of course, this isn’t what we want. By adding a pre-submit clearing this problem is solved:

$('[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: