Problème de compatibilité avec le navigateur Jquery, qu'est-ce que je fais de mal?

Question

Voici un autre problème. J'utilise JQuery-1 pour ajouter une interactivité simple à l'une de mes pages. En bref, la page contient une zone de texte de recherche en haut à droite, sur document.ready J'appelle simplement une fonction inputHint() qui ajoute l'expression "search products" à ma zone de texte. Lorsque l'utilisateur clique sur cette zone de texte, j'appelle une autre fonction (hideHint() dans ce cas) pour masquer la phrase par défaut "search products". Enfin, si l'utilisateur quitte le texte sans taper et clique n'importe où ailleurs sur la page, je revois l'indice à nouveau. Voici un morceau de 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('');    
    } 

et est ici le gestionnaire document.ready (ou tout ce que vous pourriez l'appeler):

$(document).ready(function(){ 

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

Ce code obtient la fonctionnalité désirée pour travailler comme un charme mais seulement sur Google Chrome et Safari. IE et Firefox ont tous les deux un comportement très bizarre (l'indice fonctionne bien, mais si je recharge la page, ça s'arrête magiquement!). Mon code est-il responsable de ce comportement indésirable ou est-ce un problème avec JQuery lui-même (j'ai toujours entendu que JQuery est compatible avec tous les principaux navigateurs)? Idées !?
PS: ceci est JQuery-1

Answer 1

Cela pourrait être un peu d'un long coup, il n'y a pas besoin d'envelopper l'appel à inputHint() dans la fonction $(), comme il est déjà dans votre fonction prêt . Essayez ceci:

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

Answer 2

Je ne sais pas pourquoi vous utilisez l'attribut accesskey pour stocker votre soupçon, mais de toute façon ...

$.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); 
};