Recientemente recibí una queja de error de un cliente en Suecia donde el diseño de teclado predeterminado de Mac dice que Opción + 2 hace un signo @ . El cliente me informó que también todos los teclados en Finlandia tienen ese diseño.
Hasta donde yo sé, los teclados con diseño QWERTY de EE. UU. o los diseños QWERTY del Reino Unido tienen Shift + 2 para hacer un signo @ . El problema radica en que tengo una configuración de acceso directo en el sitio web que usa la Opción + 2 para realizar una navegación. Esto obliga a cualquier usuario en Suecia/Finlandia a navegar cada vez que quiera ingresar un signo @ .
¿Hay alguna manera de saber de antemano que el diseño del teclado que el usuario está usando tiene "los modificadores que no son los que espero"? ¿O tengo que proporcionarles una opción para desactivar la navegación? La forma en que detecto las claves en este momento (con Angular):
@HostListener('document:keydown', ['$event']) public onPublicKeyDown(event: KeyboardEvent) { if (event.altKey) { switch (event.code) { case 'Digit2': // Perform the navigation } } }En términos de usabilidad y compatibilidad con varios sistemas operativos, recomendaría cambiar Alt por Ctrl (es decir, Ctrl + 2 ).
Sin embargo, también hay una forma JS de verificar que un usuario no esté tratando de ingresar texto en un campo de texto.
Los eventos suben y bajan desde el elemento que está enfocado hasta el elemento de nivel superior (BODY) que espera ser manejado.
Es fácil verificar si el evento ha alcanzado su objetivo:
// check that event was not picked by inputs and bubbled up // to the element to which it was attached (ie document.body) if (event.currentTarget === event.target) { ... } event.currentTarget se refiere al elemento al que se adjuntó el controlador de eventos (supongo que el controlador de eventos onPublicKeyDown se adjunta al CUERPO de la página)
event.target se refiere al objeto al que se envió el evento (cuando el foco está en el elemento INPUT y el usuario está escribiendo texto en un campo, será INPUT, si el foco no está dentro de INPUT, probablemente será el CUERPO de la página).
Aquí hay un ejemplo de trabajo:
function onPublicKeyDown(event) { // check that event was not picked by inputs and bubbled up // to the element to which it was attached (ie document.body) if (event.target === event.currentTarget) { if (event.altKey) { switch (event.code) { case 'Digit2': // Perform the navigation alert('Navigating away...'); } } } } document.body.addEventListener('keydown', onPublicKeyDown); Try press 'option + 2' when focused inside input and when outside.<br> <input type="text" />