jQuery textbox hinter in IE8

Maybe you know the jQuery textbox hinter. That is a JavaScript lib. that adds an text and a css class to input textbox in a HTML page. The idea behind this technic is to show a hint in a textbox. That can look like this here:

And as soon you click into the textbox the hint disappears. The jQuery textbox hinter makes a good job but in the IE8 it does not work and in my case it broke the whole jQuery code. The Problem was that in the javascript code of jQuery textbox hinter the name of the one attribute is “class”. That is keyword and it seems that makes the code IE8 broken.

I renamed the attribute and after the refactoring it worked fine in IE8. Here is my refactored version of the jQuery textbox hinter.

/*
 * jQuery - Textbox Hinter plugin v1.0
 * http://www.aakashweb.com/
 * Copyright 2010, Aakash Chakravarthy
 * Released under the MIT License.
 */

(function($){
   $.fn.tbHinter = function(options) {

   var defaults = {
      text: 'Enter a text ...',
      styleclass: ''
   };

   var options = $.extend(defaults, options);

   return this.each(function(){

      $(this).focus(function(){
         if($(this).val() == options.text){
            $(this).val('');
            $(this).removeClass(options.styleclass);
         }
      });

      $(this).blur(function(){
         if($(this).val() == ''){
            $(this).val(options.text);
            $(this).addClass(options.styleclass);
         }
      });

      $(this).blur();

   });
};
})(jQuery);