Use placeholder instead of title

May 18, 2010 at 8:25 PM

Hello Rob...

I´m working with HTML5 and there is a new attribute called placeholder, that provides this functionality in modern browsers (http://diveintohtml5.org/forms.html#placeholder).

The problem: actually only Chrome and Safari use it. So your code works great in the other browsers.

So I have 2 recommendations:

1. Use the "placeholder" attribute instead of "title".

2. Detect if the"placeholder" attibute is supported by the client browser. If it is not supported add your function.

I have re-written your code with both modifications.

Take a look...

 

// jQuery Input Hints plugin
// Copyright (c) 2009 Rob Volk - 2010 Modified by Gabriel Porras with Attribute Detection by http://diveintohtml5.org/detect.html#input-types
// http://www.robvolk.com

jQuery.fn.inputHints=function() {
    // hides the input display text stored in the title on focus
    // and sets it on blur if the user hasn't changed it.
    
    // Is Plaecholder attribute supported by client?
    var i = document.createElement('input');
  var supported = 'placeholder' in i ;
    if (  supported  )  return ;
    
    // show the display text
    $(this).each(function(i) {
            $(this).val($(this).attr('placeholder'));
    });

    // hook up the blur & focus
    return $(this).focus(function() {
            if ($(this).val() == $(this).attr('placeholder'))
                    $(this).val('');
    }).blur(function() {
            if ($(this).val() == '')
                    $(this).val($(this).attr('placeholder'));
    });
    
};

I hope you like it.

See ya!