Jquery browser-compatibality issue, what am I doing wrong?

Question

Hello SO Gus,
Here's another problem. I'm using JQuery-1 to add a simple interactivity to one of my pages. In short, the page contains a search text box at the top right, on document.ready I simply call an inputHint() function that adds the phrase "search products" to my textbox. When the user clicks this textbox, I call another function (hideHint() in this case) to hide the default "search products" phrase. Finally if the user leaves the text without typing and clicks anywhere else on the page, I reshow the hint again. Here's a piece of the javascript userd:

$.fn.inputHint = function(options) {
 options = $.extend({hintClass: 'hint'}, options || {});

 function showHint() {   
  if ($(this).val() == '') { 
  $(this).addClass(options.hintClass).val($(this).attr('accesskey'));    
  }
  else{}
 }

 function removeHint() {  
  if ($(this).hasClass(options.hintClass)) $(this).removeClass(options.hintClass).val('');   
 }

and here's the document.ready handler (or whatever you might call it):

$(document).ready(function(){

/* Initialize hint*/           
  $(function() {
    $('*[@accesskey]').inputHint();
  });});

This code gets the desired functionality to work like charm but only on Google Chrome, and Safari. IE and Firefox both have a very weired behavior (the hint works fine, but if I reload the page, it magically stops!). Is my code responsible for this weired behavior or is it a problem with JQuery itself (I'v always used to hear that JQuery is compatible with all major browsers)? Ideas!?
PS: this is JQuery-1

Answer 1

This might be a bit of a long-shot, there's no need to wrap the call to inputHint() in $function(), as it's already in your ready function. Try this:

$(document).ready(function(){
    /* Initialize hint*/ 
    $('*[@accesskey]').inputHint();    
});

Answer 2

I'm not sure why you're using the accesskey attribute to store your hint, but anyways...

$.fn.inputHint = function(options) {
    options = $.extend({ hintClass: 'hint' }, options || {});

    $this = $(this);
    hintValue = $this.attr("accesskey");

    function showHint() {
        if ($this.val() == "") {
            $this.addClass(options.hintClass).val(hintValue);
        }
    }

    function removeHint() {
        if ($this.hasClass(options.hintClass)) {
            $this.removeClass(options.hintClass).val("");
        }
    }

    $this.blur(showHint)
         .focus(removeHint)
         .addClass(options.hintClass)
         .val(hintValue);
};