jQuery: Como capturar o pressionamento de tecla TAB dentro de uma caixa de texto


145

Quero capturar a tecla TAB, cancelar a ação padrão e chamar minha própria função javascript.

Respostas:


249

Edit: Como seu elemento é inserido dinamicamente, você deve usar delegadoon() como no seu exemplo, mas deve vinculá-lo ao evento keydown, porque, como comenta o @Marc, no IE o evento keypress não captura chaves que não são de caracteres:

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

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

Veja um exemplo aqui .


quando eu empurrar TAB no IE6 + o evento não faz fogo (ele é acionado em qualquer tecla alfanumérica embora) ... Eu preciso usar .Live ( 'keypress', fn)
Jon Erickson

Se só funciona com ao vivo, talvez você está inserindo o elemento de caixa de texto dinamicamente, se o elemento já está na página, ele vai trabalhar, verifique este exemplo: jsbin.com/oguhe
CMS

sim, a caixa de texto é inserida dinamicamente. meu exemplo com #textbox id era apenas para simplificar a questão =)
Jon Erickson

@ Jon, a razão pela qual você não está usando $ (seletor) .live ("keydown", fn) é? CMS está sugerindo usando keydown porque no IE, keypress não funciona para chaves noncharacter, (tais como Tab)
Marc

5
@ Appleprew: diz sim, mas não é verdade - pelo menos para pressionar as teclas. Para a guia e.which é 0 e e.keyCode é 9 (como deveria ser). Testado em FF 3.5.16, jQuery 1.6.2.
Johndodo 7/10

19

Exemplo de trabalho no jQuery 1.9:

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

2
faça e.preventDefault();double para impedir a inserção de espaços em branco na caixa de texto.
stil 27/05

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

2
Além disso, para cancelar a ação padrão, use e.preventDefault (); na primeira linha da função.
Josh Leitzel

@ Jon, keypress faz chaves noncharacter não captura no IE
Marc

@ Marc vejo isso, como posso ser compatível com o IE e o FF?
21711 Jon Erickson

4
^^ A ironia ... jQuery deve preencher a lacuna entre os manos, para que você não precise se preocupar com coisas assim.
Jagd

@Jagd, jQuery não pode inferir intenção. pressionar e pressionar teclas não são equivalentes por um bom motivo. Acontece que esta situação não exige distinção.
Marc

7

Os métodos mostrados acima não funcionaram para mim, pode ser que eu esteja usando o jquery antigo, e finalmente o trecho de código abaixo mostrado funciona - postando apenas no caso de alguém na minha mesma posição

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

5

Uma parte importante do uso de uma tecla pressionada na guia é saber que a guia sempre tentará fazer algo já; não se esqueça de "retornar falso" no final.

Aqui está o que eu fiz. Eu tenho uma função que roda em .blur e uma função que troca onde meu foco de formulário está. Basicamente, ele adiciona uma entrada ao final do formulário e vai para lá enquanto executa os cálculos no desfoque.

$(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

Tente o seguinte:

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

1

Suponha que você tenha TextBox com o ID txtName

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

1

Você pode capturar uma guia de eventos usando esta API JQuery.

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

funciona para mim depois de adicionar evt.preventDefault (); no if
LowFieldTheory

-1

Isso funcionou para mim:

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.