Tutorial How to Use the HTML5 Placeholder Attribute, and Support it for Older Browsers

 

HTML5 Placeholder Attribute

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>
  $(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.

Source: http://jacklmoore.com/notes/form-placeholder-text/