jQuery : Comment capturer l'appui sur la touche TAB dans une zone de texte ?

Question

Je veux capturer l'appui sur la touche TAB, annuler l'action par défaut et appeler ma propre fonction javascript.

Answer 1

Editar: Puisque votre élément est inséré dynamiquement, vous devez utiliser délégué on() comme dans votre exemple, mais vous devez le lier à l'événement keydown, car, comme l'indique @Marc, dans IE, l'événement keypress ne prend pas en compte les touches sans caractère :

$("#parentOfTextbox").on('keydown', '#textbox', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    // call custom function here
  } 
});

Vérifiez un exemple aquí .

Answer 2

Exemple de travail dans jQuery 1.9 :

$('body').on('keydown', '#textbox', function(e) {
    if (e.which == 9) {
        e.preventDefault();
        // do your code
    }
});

Answer 3

$('#textbox').live('keypress', function(e) {
    if (e.keyCode === 9) {
        e.preventDefault();
        // do work
    }
});

Answer 4

Les méthodes présentées ci-dessus n'ont pas fonctionné pour moi, peut-être que j'utilise un peu vieux jquery, puis finalement l'extrait de code ci-dessous a fonctionné pour moi - poster juste au cas où quelqu'un dans ma même position

$('#textBox').live('keydown', function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();
        alert('tab');
    }
});

Answer 5

Une partie importante de l'utilisation d'une touche vers le bas sur tab est de savoir que tab va toujours essayer de faire quelque chose déjà, n'oubliez pas de "retourner false" à la fin.

Voici ce que j'ai fait. J'ai une fonction qui s'exécute sur .blur et une fonction qui change l'endroit où se trouve le focus de mon formulaire. En gros, elle ajoute une entrée à la fin du formulaire et s'y rend tout en effectuant des calculs sur le flou.

$(this).children('input[type=text]').blur(timeEntered).keydown(function (e) {
        var code = e.keyCode || e.which;
        if (code == "9") {
            window.tabPressed = true;
            // Here is the external function you want to call, let your external
            // function handle all your custom code, then return false to
            // prevent the tab button from doing whatever it would naturally do.
            focusShift($(this));
            return false;
        } else {
            window.tabPressed = false;
        }
        // This is the code i want to execute, it might be different than yours
        function focusShift(trigger) {
            var focalPoint = false;
            if (tabPressed == true) {
                console.log($(trigger).parents("td").next("td"));
                focalPoint = $(trigger).parents("td").next("td");

            }
            if (focalPoint) {
                $(focalPoint).trigger("click");
            }
        }
    });