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);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s