jQuery: Jak przechwycić naciśnięcie klawisza TAB w polu tekstowym

145

Chcę przechwycić naciśnięcie klawisza TAB, anulować domyślną akcję i wywołać własną funkcję javascript.

Jon Erickson
źródło

Odpowiedzi:

249

Edycja: Ponieważ element jest wstawiany dynamicznie, musisz użyć delegowanego,on() jak w przykładzie, ale powinieneś powiązać go ze zdarzeniem keydown, ponieważ jako komentarz @Marc, w IE zdarzenie keypress nie przechwytuje kluczy innych niż znakowe:

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

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

Sprawdź przykład tutaj .

CMS
źródło
kiedy wciskam TAB w IE6 + zdarzenie się nie uruchamia (chociaż odpala na dowolnym klawiszu alfanumerycznym) ... Muszę użyć .live ('keypress', fn)
Jon Erickson
Jeśli działa tylko z live, być może dynamicznie wstawiasz swój element textbox, jeśli element jest już na stronie, zadziała, sprawdź ten przykład: jsbin.com/oguhe
CMS
tak, pole tekstowe jest wstawiane dynamicznie. mój przykład z id #textbox był tylko uproszczeniem pytania =)
Jon Erickson
@Jon, powodem dla którego nie używasz $ (selector) .live ("keydown", fn) jest? CMS sugeruje użycie keydown, ponieważ w IE, naciśnięcie klawisza nie działa w przypadku klawiszy innych niż znaki (takie jak Tab)
Marc
5
@AppleGrew: tak mówi, ale to nieprawda - przynajmniej w przypadku naciśnięcia klawisza. Dla Tab e., Która wynosi 0, a e.keyCode to 9 (tak, jak powinno). Przetestowano w FF 3.5.16, jQuery 1.6.2.
johndodo
19

Przykład roboczy w jQuery 1.9:

$('body').on('keydown', '#textbox', function(e) {
    if (e.which == 9) {
        e.preventDefault();
        // do your code
    }
});
Buzogany Laszlo
źródło
2
make e.preventDefault();double, aby zapobiec wstawianiu spacji do pola tekstowego.
nadal
12
$('#textbox').live('keypress', function(e) {
    if (e.keyCode === 9) {
        e.preventDefault();
        // do work
    }
});
Jon Erickson
źródło
2
Ponadto, aby anulować domyślną akcję, użyj e.preventDefault (); w pierwszym wierszu funkcji.
Josh Leitzel
@Jon, keypress nie przechwytuje kluczy innych niż znaki w IE
Marc,
@Marc Widzę, jak mogę być kompatybilny z IE i FF?
Jon Erickson
4
^^ Ironia ... jQuery ma wypełnić lukę między przeglądarkami, abyś nie musiał się martwić takimi rzeczami.
Jagd
@Jagd, jQuery nie może wywnioskować zamiaru. keypress i keydown nie są równoważne nie bez powodu. Tak się składa, że ​​ta sytuacja nie wymaga rozróżnienia.
Marc
7

Powyższe metody nie zadziałały dla mnie, być może używam trochę starego jquery, to w końcu działa pokazany poniżej fragment kodu - wysyłanie na wypadek, gdyby ktoś na mojej pozycji

$('#textBox').live('keydown', function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();
        alert('tab');
    }
});
Oxi
źródło
5

Ważną częścią używania klawisza w dół na karcie jest świadomość, że karta zawsze będzie już próbowała coś zrobić, nie zapomnij o zwróceniu false na końcu.

Oto co zrobiłem. Mam funkcję, która działa na .blur i funkcję, która zamienia miejsce, w którym koncentruje się mój formularz. Zasadniczo dodaje dane wejściowe na końcu formularza i przechodzi tam podczas wykonywania obliczeń rozmycia.

$(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");
            }
        }
    });
Jordan From Freer Tool
źródło
4

Spróbuj tego:

$('#contra').focusout(function (){
    $('#btnPassword').focus();
});
Carlos
źródło
1

Załóżmy, że masz TextBox z identyfikatorem txtName

$("[id*=txtName]").on('keydown', function(e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 9) {
     e.preventDefault();
     alert('Tab Pressed');
 }
}); 
UJS
źródło
1

Możesz przechwycić kartę zdarzenia za pomocą tego interfejsu API JQuery.

$( "#yourInputTextId" ).keydown(function(evt) {
   if(evt.key === "Tab")
      //call your function
});
czaple
źródło
u mnie działa po dodaniu evt.preventDefault (); w if
LowFieldTheory
-1

To zadziałało dla mnie:

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

Ventas Uruguay
źródło