html5placeholder.js

HTML5 placeholders

enablePlaceholders: function() {
  if (!('placeholder' in document.createElement('input'))) {
    // enable <input placeholder> for browsers not drinking HTML5 kool-aid
    $('input[placeholder]').each(function() {
      var $this = $(this);
      var placeholder = $this.attr('placeholder');
      
      var insert_placeholder = function() {
        if ($this.val() === '') {
          $this.val(placeholder);
          $this.addClass('placeholder');
        }
      };
      
      var remove_placeholder = function() {
        if ($this.val() === placeholder) {
          $this.val('');
          $this.removeClass('placeholder');
        }
      };
      
      $this.bind('focus', remove_placeholder);
      $this.bind('blur', insert_placeholder);
      // https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Objects/Function/Apply
      insert_placeholder.apply(this);
      
      // prevent submission with default placeholder
      $this.parents('form').bind('submit', function() {
        remove_placeholder();
      });
    });
  }
}

You could also choose to use my placeholder plugin, which has the added advantage of working for textareas. The only thing I didn’t add support for (yet?) is password inputs.

I think plugins are a neat idea in general, but any plugin wants to cover edge cases (like textarea or password input in this case). This snippet doesn’t work that way and I don’t think it should. :)

Here's mine: http://gist.github.com/506492