jQuery: cómo capturar la pulsación de tecla TAB dentro de un cuadro de texto


145

Quiero capturar la tecla TAB, cancelar la acción predeterminada y llamar a mi propia función de JavaScript.

Respuestas:


249

Editar: dado que su elemento se inserta dinámicamente, debe usar delegadoon() como en su ejemplo, pero debe vincularlo al evento keydown, porque como comenta @Marc, en IE el evento de pulsación de tecla no captura teclas que no son caracteres:

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

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

Mira un ejemplo aquí .


cuando presiono TAB en IE6 + el evento no se dispara (dispara en cualquier tecla alfanumérica) ... necesito usar .live ('presionar tecla', fn)
Jon Erickson

Si solo funciona con live, tal vez esté insertando su elemento de cuadro de texto dinámicamente, si el elemento ya está en la página, funcionará, consulte este ejemplo: jsbin.com/oguhe
CMS

sí, el cuadro de texto se inserta dinámicamente. mi ejemplo con id #textbox fue solo para simplificar la pregunta =)
Jon Erickson

@ Jon, la razón por la que no estás usando $ (selector) .live ("keydown", fn) es? CMS sugiere usar la tecla de acceso directo porque en IE, la pulsación de teclas no funciona para teclas que no son caracteres, (como Tab)
Marc

55
@AppleGrew: lo dice, sí, pero no es cierto, al menos para presionar teclas. Para Tab e.que es 0 y e.keyCode es 9 (como debería ser). Probado en FF 3.5.16, jQuery 1.6.2.
johndodo

19

Ejemplo de trabajo en jQuery 1.9:

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

2
hacer e.preventDefault();doble para evitar la inserción de espacios en blanco en el cuadro de texto.
Stil

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

2
Además, para cancelar la acción predeterminada, use e.preventDefault (); en la primera línea de la función.
Josh Leitzel

@ Jon, pulsación de tecla hace teclas no son caracteres no captura en IE
Marc

@Marc Ya veo eso, ¿cómo puedo ser compatible con IE y FF?
Jon Erickson

44
^^ La ironía ... se supone que jQuery cierra la brecha entre los hermanos, para que no tenga que preocuparse por cosas como esta.
Jagd

@Jagd, jQuery no puede inferir intención. la pulsación de teclas y la pulsación de teclas no son equivalentes por buenas razones. Sucede que esta situación no requiere la distinción.
Marc

7

Los métodos que se muestran arriba no me funcionaron, puede ser que esté usando jquery un poco viejo, y finalmente el fragmento de código que se muestra a continuación funciona para publicar solo en caso de que alguien en mi misma posición

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

5

Una parte importante del uso de una tecla hacia abajo en la pestaña es saber que la pestaña siempre intentará hacer algo, no se olvide de "devolver falso" al final.

Aquí esta lo que hice. Tengo una función que se ejecuta en .blur y una función que intercambia donde está mi foco de formulario. Básicamente agrega una entrada al final del formulario y va allí mientras ejecuta cálculos en desenfoque.

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

Prueba esto:

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

1

Supongamos que tiene TextBox con Id txtName

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

1

Puede capturar una pestaña de evento utilizando esta API JQuery.

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

funciona para mí después de agregar evt.preventDefault (); en el if
LowFieldTheory

-1

Esto funcionó para mí:

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.