web-dev-qa-db-fra.com

jQuery: keyup pour TAB-key?

Donc, j'ai du mal à faire fonctionner mon script SI la touche Tab est enfoncée. Après quelques recherches rapides, le code de char pour Tab est 9. De plus, pendant que nous parlons, y a-t-il de meilleures façons de vérifier si une touche est enfoncée sans utiliser de charcodes? Je demande parce que je reçois toujours l'avertissement suivant par firebug lors de l'utilisation de charcode:

La propriété 'charCode' d'un événement keyup ne doit pas être utilisée. La valeur n'a pas de sens.

Quoi qu'il en soit, cela fonctionne toujours, donc ce n'est pas le problème. Voici le code que j'utilise:

$('/* my inputs */').keyup(function(e) {
   console.log('keyup called');
   var code = e.keyCode || e.which;
   if (code == '9') {
     console.log('Tab pressed');
   }
});

En utilisant le code ci-dessus, la console est laissée vierge, rien n'est ajouté (en utilisant Firebug). Bien sûr, j'ai essayé de faire des trucs au lieu d'enregistrer du texte, mais rien ne s'exécute. Alors, quelqu'un peut-il voir pourquoi cela ne fonctionne pas? Existe-t-il un meilleur moyen de vérifier si une touche est enfoncée?

Merci d'avance.

jquerytabs
38
qwerty

Mon intuition est que lorsque vous appuyez sur la touche de tabulation, l'entrée de votre formulaire perd le focus, avant que la frappe ne se produise. Essayez de changer la liaison au corps, comme ceci:

 $('body').keyup(function(e) {
    console.log('keyup called');
    var code = e.keyCode || e.which;
    if (code == '9') {
    alert('Tab pressed');
    }
 });

Ensuite, si cela fonctionne (cela fonctionne pour moi), essayez plutôt de changer la liaison en keyDown et retournez false. De cette façon, vous pouvez implémenter votre propre comportement personnalisé.

$('.yourSelector').keydown(function(e) {
   console.log('keyup called');
   var code = e.keyCode || e.which;
   if (code == '9') {
     alert('Tab pressed');

   return false;
   }

});

L'un de ces deux devrait fonctionner ... si c'est le corps, vous pouvez attacher un gestionnaire de touches sur le corps, puis si c'est un onglet, trouvez le champ avec le focus (je pense qu'il y a la fonction .hasFocus ()?), Et si c'est celui que vous vouloir, procéder et retourner faux. Sinon, laissez le navigateur faire son travail.

Si vous souhaitez mettre à jour le champ AVEC un caractère de tabulation, essayez ceci dans votre rappel:

var theVal = $(this).val();
theVal = theVal + ' ';
$(this).val(theVal);

Je ne l'ai pas testé, mais ça devrait marcher. Vous pouvez également ajouter 3 ou 4 espaces au lieu du caractère de tabulation, si cela vous pose des problèmes.

74
Chris Ladd
e = e || window.event;
if(e.keyCode == 9)
 alert("Tab pressed");

Essaye ça

1
AlanFoster