jQuery: So erfassen Sie den TAB-Tastendruck in einem Textfeld


145

Ich möchte den TAB-Tastendruck erfassen, die Standardaktion abbrechen und meine eigene Javascript-Funktion aufrufen.

Antworten:


249

Bearbeiten: Da Ihr Element dynamisch eingefügt wird, müssen Sie es wie in Ihrem Beispiel delegiert verwendenon() , aber Sie sollten es an das Keydown-Ereignis binden, da das Tastendruckereignis im IE als @Marc-Kommentare keine Nicht-Zeichen-Schlüssel erfasst:

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

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

Hier finden Sie ein Beispiel hier .


Wenn ich TAB in IE6 + drücke, wird das Ereignis nicht ausgelöst (es wird jedoch auf einer alphanumerischen Taste ausgelöst) ... Ich muss .live ('keypress', fn) verwenden
Jon Erickson

Wenn nur mit Live funktioniert, fügen Sie Ihr Textfeldelement möglicherweise dynamisch ein. Wenn sich das Element bereits auf der Seite befindet, funktioniert es. Überprüfen Sie dieses Beispiel: jsbin.com/oguhe
CMS

Ja, das Textfeld wird dynamisch eingefügt. Mein Beispiel mit der ID #textbox war nur, um die Frage zu vereinfachen =)
Jon Erickson

@ Jon, der Grund, warum Sie $ (Selektor) .live ("keydown", fn) nicht verwenden, ist? CMS schlägt vor, Keydown zu verwenden, da im IE der Tastendruck für Nicht-Zeichen-Schlüssel (wie Tab.) Nicht funktioniert
Marc

5
@AppleGrew: es sagt ja, aber es ist nicht wahr - zumindest für Tastendruck. Für Tab e.which ist 0 und e.keyCode ist 9 (wie es sein sollte). Getestet in FF 3.5.16, jQuery 1.6.2.
Johndodo

19

Arbeitsbeispiel in jQuery 1.9:

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

2
Machen Sie e.preventDefault();double, um das Einfügen von Leerzeichen in das Textfeld zu verhindern.
stil

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

2
Verwenden Sie e.preventDefault (), um die Standardaktion abzubrechen. in der ersten Zeile der Funktion.
Josh Leitzel

@ Jon, Tastendruck erfasst keine Nicht-Zeichen-Schlüssel in IE
Marc

@Marc Ich sehe das, wie kann ich mit IE und FF kompatibel sein?
Jon Erickson

4
^^ Die Ironie ... jQuery soll die Lücke zwischen den Browsern schließen, damit Sie sich über solche Dinge keine Sorgen machen müssen.
Jagd

@Jagd, jQuery kann nicht auf Absichten schließen. Tastendruck und Tastendruck sind aus gutem Grund nicht gleichwertig. Es kommt einfach so vor, dass diese Situation keine Unterscheidung erfordert.
Marc

7

Die oben gezeigten Methoden haben bei mir nicht funktioniert. Vielleicht verwende ich eine etwas alte JQuery. Dann funktioniert das unten gezeigte Code-Snippet für das Posten - nur für den Fall, dass sich jemand in derselben Position befindet

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

5

Ein wichtiger Teil der Verwendung eines Schlüssels auf der Registerkarte ist das Wissen, dass die Registerkarte immer versucht, bereits etwas zu tun. Vergessen Sie nicht, am Ende "false" zurückzugeben.

Hier ist was ich getan habe. Ich habe eine Funktion, die auf .blur ausgeführt wird, und eine Funktion, die vertauscht, wo mein Formularfokus liegt. Grundsätzlich fügt es am Ende des Formulars eine Eingabe hinzu und geht dorthin, während Berechnungen für Unschärfe ausgeführt werden.

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

4

Versuche dies:

$('#contra').focusout(function (){
    $('#btnPassword').focus();
});

1

Angenommen, Sie haben eine Textbox mit der ID txtName

$("[id*=txtName]").on('keydown', function(e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 9) {
     e.preventDefault();
     alert('Tab Pressed');
 }
}); 

1

Mit dieser JQuery-API können Sie eine Ereignisregisterkarte erfassen .

$( "#yourInputTextId" ).keydown(function(evt) {
   if(evt.key === "Tab")
      //call your function
});

es funktioniert für mich nach dem Hinzufügen von evt.preventDefault (); in der if
LowFieldTheory

-1

Das hat bei mir funktioniert:

$("[id*=txtName]").on('keydown', function(e) { var keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); alert('Tab Pressed'); } });

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.