teclas teclado tecla suprimir event ejemplo detectar codigo javascript html5 browser cross-browser

javascript - teclado - if tecla== 8



Traduzca Javascript keyCode en charCode para una distribuciĆ³n de teclado no estadounidense(es decir, azerty) (2)

Fondo rápido:

  • cuando se presiona una tecla en un navegador, se generan tres eventos: keyDown , keyPress y keyUp .
  • keyDown y keyUp tienen una propiedad keyCode que es aproximadamente la tecla física presionada.
  • keyPress también tiene un conjunto de propiedades charCode que tiene en cuenta las teclas modificadoras y el diseño del teclado (A y a tienen el mismo código de tecla pero un código de carácter diferente).
  • los tres eventos tienen propiedades que indican qué teclas modificadoras se presionaron durante esos eventos.

Soy el desarrollador principal de noVNC y tengo un problema difícil: noVNC necesita el valor de código de caracteres traducido sin usar el evento keyPress por las siguientes razones:

  • noVNC necesita enviar los eventos keyDown y keyUp por separado al servidor VNC (de lo contrario no es un cliente VNC completamente funcional).
  • lo que es más importante, noVNC debe evitar las acciones predeterminadas del teclado mientras está conectado, lo que significa llamar al método preventDefault () del evento keyDown . Esto tiene el efecto secundario de evitar también que se active el evento keyPress .

Debido a las diferencias en los diseños de teclado (es decir, diferentes asignaciones de KeyCode a charCode), he determinado que noVNC necesitará una tabla de búsqueda para diferentes diseños de teclado.

Pero aquí está el problema real: en diseños alternativos, algunas claves físicas diferentes tienen el mismo código de clave. Por ejemplo, con un teclado azerty (francés), las teclas de subrayado ''-'' (guión) y ''_'' generan el código de clave 189. ¡¡¡Ack !!!

Entonces ... ¿cómo obtengo la clave adecuada para la asignación de códigos de caracteres y evitar las acciones predeterminadas del navegador al mismo tiempo?

Por cierto, sospecho que la solución a esto será aplicable a otras aplicaciones web interactivas y juegos HTML5, ya que a menudo desea poder conocer toda la información sobre la tecla presionada sin desencadenar ninguna respuesta adicional del navegador a esa pulsación de tecla.

Enlaces útiles:

Solución : ver mi post a continuación.


Este es un campo minado absoluto y le insto a que no intente esto si puede evitarlo. No solo existe un largo y enredado historial de fabricantes de navegadores que no están de acuerdo con el comportamiento de los eventos clave, también existe el hecho de que todavía no están de acuerdo y siguen cambiando regularmente el comportamiento clave de sus navegadores.

Lo siguiente es lo mejor que puedo ofrecer y el recurso definitivo en eventos clave del navegador: Summary

Si tiene que hacer esto, creo que va a terminar con un montón de tablas de mapeo de códigos clave que se desactualizarán muy rápidamente. Buena suerte.


He resuelto mi propia pregunta. No es una solución al 100%, pero debería cubrir la mayor parte de lo que se necesita. Es de esperar que haya una solución más limpia cuando los proveedores de navegadores comiencen a integrar los Eventos DOM Nivel 3 .

Solo para repetir las principales restricciones:

  1. Los eventos key down y key up deben informarse / enviarse en el momento en que realmente ocurren. Es decir, enviar una tecla hacia abajo y una tecla arriba durante el evento keyPress no es suficiente.
  2. Muchas combinaciones de teclas deben manejarse por completo durante el evento keyDown, ya que nunca activan un evento keyPress (es decir, la tecla Ctrl) o porque la acción predeterminada debe detenerse en keyDown (WebKit) y al hacerlo evita que ocurra el evento keyPress.
  3. La clave hacia abajo y los eventos clave deben informar el código de carácter traducido y no el valor de KeyCode.

Sin alguna revelación inmediata, las implementaciones actuales del navegador parecen evitar que las tres restricciones se cumplan por completo. Así que he decidido relajar la restricción # 3 solo un poco.

  • En el evento keyDown del navegador, agregue el evento a una lista clave y verifique si se trata de una combinación de teclas segura (no hay un comportamiento predeterminado no deseado del navegador):

    • Seguro : no hacer nada hasta que el keyPress.

    • Inseguro : informe / envíe un evento de cierre de llave inmediatamente. Aquí es donde la restricción # 3 se relaja porque estas combinaciones de teclas limitadas no se traducen a un código de carácter (muchas de ellas no las tienen, de todos modos).

  • En el evento keyPress del navegador (que ocurre inmediatamente después del evento keyDown) verifique si es una combinación de teclas segura:

    • Seguro : reportar / enviar un evento clave abajo. Actualice la lista de teclas con el código de carácter traducido (event.which).

    • Inseguro : no hacer nada, ya que ya se informó / envió durante keyDown.

  • En el evento keyUp del navegador, busque y elimine el evento correspondiente de la lista desplegable y use el código traducido para informar / enviar el evento clave arriba.

Algunos enlaces adicionales para aquellos interesantes: