2011-01-21 81 views
36

Por lo tanto, tengo problemas para ejecutar mi script si se presiona la tecla Tab. Después de buscar en Google rápidamente, el código de la ficha es 9. Además, mientras hablamos, ¿hay alguna forma mejor de verificar si se presiona una tecla sin usar códigos de caracteres? Lo estoy preguntando porque sigo recibiendo la siguiente advertencia de firebug cuando se utiliza el código:jQuery: ¿tecla para la tecla TAB?

No se debe utilizar la propiedad 'charCode' de un evento de teclado. El valor no tiene sentido

De todos modos, todavía funciona, así que ese no es el problema. Este es el código que utilizo:

$('/* my inputs */').keyup(function(e) { 
    console.log('keyup called'); 
    var code = e.keyCode || e.which; 
    if (code == '9') { 
    console.log('Tab pressed'); 
    } 
}); 

Utilizando el código encima de la consola se deja en blanco, se añade nada (usando Firebug). Por supuesto, intenté hacer cosas en lugar de registrar el texto, pero no se ejecuta nada. Entonces, ¿alguien puede ver por qué esto no está funcionando? ¿Hay una mejor manera de verificar si se presiona una tecla?

Gracias de antemano.

Respuesta

66

Mi corazonada es que cuando se pulsa la tecla de tabulación, la entrada de su formulario pierde el foco, antes de que ocurra la keyup . Intente cambiar la unión con el cuerpo, como esto:

$('body').keyup(function(e) { 
    console.log('keyup called'); 
    var code = e.keyCode || e.which; 
    if (code == '9') { 
    alert('Tab pressed'); 
    } 
}); 

Entonces, si funciona (lo hace para mí) intente cambiar la unión a keyDown, en su lugar, y volver falsa. De esa forma puedes implementar tu propio comportamiento personalizado.

$('.yourSelector').keydown(function(e) { 
    console.log('keyup called'); 
    var code = e.keyCode || e.which; 
    if (code == '9') { 
    alert('Tab pressed'); 

    return false; 
    } 

}); 

Uno de estos dos deben trabajar ... si es corporal, podría adjuntar un controlador keydown en el cuerpo, a continuación, si se trata de pestaña, encontrar el campo con el foco (Creo que hay función .hasFocus()?) , y si es el que quieres, procede y devuelve falso. De lo contrario, deje que el navegador haga su trabajo.

Si se quiere actualizar el campo con un carácter de tabulación, intente esto en su devolución de llamada:

var theVal = $(this).val(); 
theVal = theVal + ' '; 
$(this).val(theVal); 

no lo he probado, pero debería funcionar. También puede agregar 3 o 4 espacios en lugar del carácter de tabulación, si le causa problemas.

+1

Tenías razón, la entrada pierde el foco antes de que se ejecute la tecla. Cambié el keyup a keydown y funciona como debería ahora. ¡Gracias hombre! – qwerty

+0

Hm, me encontré con otro problema ahora. Usando return falso; No puedo usar las entradas, lo cual lo hace inútil. Probé preventDefault, pero tampoco parece funcionar. ¿Hay alguna forma de eludir eso? – qwerty

+0

Supongo que quieres agregar un carácter de 'pestaña' a la entrada, ¿verdad? Agregué un ejemplo de código a mi respuesta. –

-1

si no ocurre nada, independientemente de la tecla presionada, ¿hay algún problema con el selector que está utilizando? Se puede verificar que está seleccionando adecuadamente, tal vez con algo como:

console.log($('/* my inputs */').length); 
+0

El selector que uso es: $ ('. NameOfTheForm input') – qwerty

1
e = e || window.event; 
if(e.keyCode == 9) 
alert("Tab pressed"); 

Prueba este

+0

Todavía no funciona. Intenté usar otras teclas (intenté entrar (13) y bajar página (34)), pero ninguna parece funcionar. Sin embargo, sé que se llama la tecla, así que es algo allí. – qwerty

+0

Alerta e.keyCode luego, y vea qué está pasando. – AlanFoster

Cuestiones relacionadas