Objetivo: escuche los eventos de pulsación de tecla para capturar caracteres imprimibles.
Problema: keyPress , la solución perfecta para este problema, está en desuso y ya no se recomienda, y el keyDown alternativo no produce los mismos valores de key y code que keyPress para caracteres imprimibles, y también es inconsistente consigo mismo en todos los navegadores.
Reproducir: si desea intentar reproducir el problema, use este sitio web con diferentes navegadores y compare sus resultados
Ejemplo: al pulsar ; en el teclado:
| Evento | llave | código | cual | charCode |
|---|---|---|---|---|
| tecla abajo | . | 190 | 0 | 0 |
| Pulsar tecla | ; | 59 | 59 | 59 |
| tecla Arriba | . | 190 | 0 | 0 |
| Evento | llave | código | cual | charCode |
|---|---|---|---|---|
| tecla abajo | ; | 59 | 59 | 59 |
| Pulsar tecla | ; | 59 | 59 | 59 |
| tecla Arriba | ; | 59 | 59 | 59 |
Solución actual: estoy usando keyDown y solo permito que se procesen los valores key que coinciden con un RegEx .
Nota: estoy usando un teclado con 2 idiomas, pero no creo que esto interfiera con nada, ya que keyPress funciona bien.
Pregunta: ¿Cómo puedo hacer que keyDown produzca los mismos valores correctos keyCode que keyPress produce en todos los navegadores? ¿O debería usar keyPress a pesar de que ya no se recomienda?
EDITAR: Es posible que desee consultar 3.3. Valores de código clave de este artículo inteligente y bien detallado sobre este problema para comprender mejor este problema
Ver MDN :
KeyboardEvent.keyCode
En desuso: esta función ya no se recomienda.
y
Debe evitar usar esto si es posible; ha estado en desuso durante algún tiempo. En su lugar, debe usar KeyboardEvent.code,
const kbd = document.querySelector('kbd'); document.querySelector('input').addEventListener('keydown', e => { kbd.innerText = e.code; }); <input> <kbd></kbd>