Eventos del DOM: Controlar eventos del teclado

Eventos del DOM: Controlar eventos del teclado

¿Cómo detectar la pulsación de teclas con JavaScript?

Mediante el método addEventListener() es posible manejar los eventos del teclado.

<p id="parrafo">Tecla presionada</p>
document.addEventListener("keypress", alPresionarTecla);
function alPresionarTecla(e) {
    var teclaPresionada = e.key; // contiene la tecla que fue presionada
    document.getElementById("parrafo").innerHTML =
        "La tecla presionada es " + teclaPresionada;
}

En el código anterior, un listener es agregado directamente al objeto document del DOM. El objeto document es el nodo raíz en donde todos los demás elementos se van incorporando. Cuando una tecla es presionada, la información de dicha tecla será mostrada dentro del elemento parrafo.

Utilizando onKeyPress.

document.onkeypress = alPresionarTecla;
function alPresionarTecla(e) {
    var teclaPresionada = e.key;
    document.getElementById("parrafo").innerHTML =
        "Tecla presionada " + teclaPresionada;
}