HTML5 Placeholders

HTML5 adds a new attribute to most form elements called a placeholder. Its purpose is to add a short hint inside data entry points that disappear on focus. This type of interaction isn’t new but is new to HTML as of version 5. For this reason not all browsers have implemented this feature. Try it to see which of your browsers support the following bit of code!

HTML

<input type="text" placeholder="click me!">

So now we have a problem. Some browsers support it and others don’t!? Foresee client issues? Not to worry, here’s a workaround using the latest jQuery 1.4 features!

JavaScript

jQuery(document).ready(function($) {

  // first check if placeholder attribute is supported
  if ($('<input/>')
        .attr('placeholder','')[0]
        .placeholder === undefined) {

    // text input placeholder
    $('input[placeholder]')
      .each(function() { 
        this.value === ''
          ? this.value = $(this).attr('placeholder')
          : false; 
      })
      .live('focusin focusout', function(event) {
        event.type == 'focusout' && this.value === '' 
          ? this.value = $(this).attr('placeholder')
          : this.value === $(this).attr('placeholder')
            ? this.value = '' 
            : false;
      });

  }

});

This is not a complete solution as there are other things to consider such as visual style and what happens when you submit the form. But I’ll let you mull over those. :)

Demo and code sample: http://jsbin.com/ujosa/edit

Comments are closed.