codes - keypress enter jquery
¿Cuál es la teoría detrás de la pulsación de tecla jQuery, keydown, keyup black magic(en Mac)? (3)
Estoy confundido acerca de los diversos comportamientos de pulsación de tecla , keydown y keyup . Parece que me he perdido una importante documentación, una que explica las sutilezas y los matices de este trío. ¿Podría alguien ayudarme a determinar qué documento necesito leer para utilizar estos eventos de manera más efectiva? En caso de que quiera detalles, vea a continuación.
@ov: me pediste que mostrara un código, pero no es un problema específico del código que intento resolver. Intento entender el comportamiento de estos controladores de eventos y pedirle a alguien que los entienda que me indique una buena documentación.
Uso jQuery para crear un formulario de entrada e insertarlo en mi documento. Funciona bien, principalmente. Quiero que el formulario responda al teclado como la mayoría de los demás formularios de entrada que veo: la tecla esc debe descartar el formulario, al igual que hacer clic en el botón Cancelar y, dado que el formulario tiene un <textarea> , cmd + enter debería sea lo mismo que hacer clic en el botón Aceptar . Parece lo suficientemente simple como para usar el evento de pulsación de tecla . El problema es que Chrome no llama a mi controlador de pulsación de tecla para la tecla esc o cmd + intro . Dispara para ctrl + enter y option + enter y para alfanuméricos, pero no para cmd + enter .
Así que usaré la tecla en su lugar. Obtengo keyup para esc , y keyup para cmd , y keyup para enter , genial. Pero no obtengo la tecla para la tecla Intro mientras estoy presionando cmd .
La tercera vez es el hechizo, puede que piense que el botón de encendido parece funcionar, pero con la función de teclado , obtienes las teclas de repetición. Lo sé, todo lo que tienes que hacer es desvincular el controlador la primera vez que te llaman, pero parece extraño que los tres tipos de eventos diferentes se comporten de manera diferente. ¿Por qué es esto? ¿Hay algún documento obvio que obviamente no haya leído?
Este artículo es un buen recurso que explica las diferencias entre keyup , keydown y keypress .
La respuesta corta es que no hay una manera fácil de manejarlos que no sea la cuenta de los diferentes navegadores.
La forma en que personalmente lo manejo en un complemento de Bootstrap que escribí es mediante la creación de un método personalizado para verificar qué evento es compatible. Casualmente, un método muy similar apareció en la versión oficial de Bootstrap un poco más tarde: P
//------------------------------------------------------------------
//
// Check if an event is supported by the browser eg. ''keypress''
// * This was included to handle the "exhaustive deprecation" of jQuery.browser in jQuery 1.8
//
eventSupported: function(eventName) {
var isSupported = (eventName in this.$element);
if (!isSupported) {
this.$element.setAttribute(eventName, ''return;'');
isSupported = typeof this.$element[eventName] === ''function'';
}
return isSupported;
}
Más tarde lo uso en mi código para adjuntar controladores de eventos:
if (this.eventSupported(''keydown'')) {
this.$element.on(''keydown'', $.proxy(this.keypress, this));
}
event.ctrlKey recordar que al validar un KeyboardEvent en un mac, key la clave modificadora no se seleccionará como event.ctrlKey sino más bien como event.metaKey . Se encuentra disponible documentación adicional en MDN .
Sin ver ningún código, mi apuesta es que esta sea la razón por la cual ⌘+Enter no fue recogido.
Keypress :
El evento de pulsación de tecla se envía a un elemento cuando el navegador registra la entrada del teclado. Esto es similar al evento keydown, excepto en el caso de repeticiones de teclas . Si el usuario presiona y mantiene presionada una tecla, se desencadena un evento de pulsación una vez , pero se activan eventos de pulsación de tecla separados para cada carácter insertado . Además, las teclas modificadoras (como Shift) activan eventos de pulsación pero no eventos de pulsación de teclas .
Keydown :
El evento de tecla se envía a un elemento cuando el usuario primero presiona una tecla en el teclado . Se puede adjuntar a cualquier elemento, pero el evento solo se envía al elemento que tiene el foco . Los elementos enfocables pueden variar entre los navegadores , pero los elementos de la forma siempre pueden enfocarse, por lo que son candidatos razonables para este tipo de evento.
Keyup :
El evento de teclado se envía a un elemento cuando el usuario suelta una tecla en el teclado . Se puede adjuntar a cualquier elemento, pero el evento solo se envía al elemento que tiene el foco . Los elementos enfocables pueden variar entre los navegadores, pero los elementos de la forma siempre pueden enfocarse, por lo que son candidatos razonables para este tipo de evento.
Además, esta es una pieza útil de información que generalmente se pasa por alto:
Si se deben capturar las teclas en cualquier lugar (por ejemplo, para implementar teclas de acceso directo globales en una página), es útil adjuntar este comportamiento al objeto del documento . Debido al burbujeo del evento, todas las pulsaciones de tecla subirán hasta el DOM en el objeto de documento a menos que se detenga explícitamente.
Para determinar qué carácter se ingresó, examine el objeto de evento que se pasa a la función del controlador. Si bien los navegadores usan propiedades diferentes para almacenar esta información , jQuery normaliza la propiedad .which para que pueda usarla de manera confiable para recuperar el código del personaje .
Tenga en cuenta que la combinación de teclas y la clave proporcionan un código que indica qué tecla se pulsa, mientras que la tecla indica qué carácter se ingresó. Por ejemplo, una "a" minúscula será reportada como 65 por keydown y keyup, pero como 97 por keypress. Una mayúscula "A" se reporta como 65 por todos los eventos. Debido a esta distinción, cuando se capturan pulsaciones de teclas especiales como las teclas de flecha, .keydown () o .keyup () es una mejor opción.
Más información sobre la clave cmd en MAC: código de clave jQuery para tecla de comando