cross-browser input placeholder attribute support with jQuery and Modernizr

application.js

$(function(){

  if (!Modernizr.input.placeholder){
    $('#search input[type="search"]')
      .clearValue();
  }

});

$.fn.clearValue = function() {
  var element = this;
  var defaultStr = $(this).attr('placeholder');

  $(this).val(defaultStr);

  return this.focus(function() {
    if( this.value == defaultStr ) {
      this.value = "";
    }
  }).blur(function() {
    if( !this.value.length ) {
      this.value = defaultStr;
    }
  }).siblings(":submit").click(function() {
    $(this).siblings(element.selector).each(function() {
      if( this.value == defaultStr ) {
        this.value = "";
      }
    });
    return true;
  }).end();

};

})();

view.html

<!-- Include jQuery, Modernizr, and application.js scripts -->


<input type="search" name="search" id="search" placeholder="Search" />