Eventos del teclado - lizethcas/javascript-universe GitHub Wiki
- Hay dos eventos principales del teclado: keydown y keyup.
- se gestionan en un documento y no en un elemento específico.
- Los objetos de evento de teclado derivan de la clase base
KeyboardEvent.
document.addEventListener("keydown", event => {
console.log("Keydown: ", event);
});
document.addEventListener("keyup", event => {
console.log("Keyup: ", event);
});- Se maneja principalmente el evento
keydownya que es mas rapido. - se activan cuando se pulsa cualquier tecla, incluidas las de servicio (Ctrl, Shift, Alt, Escape y otras).
La propiedad key devuelve el carácter generado al pulsar la tecla. La propiedad code devuelve el código de la tecla física del teclado
Ejemplo
HTML
<button type="button" class="js-clear">Clear output</button>
<div class="log-list"></div>Javascript
const clearLogBtn = document.querySelector(".js-clear");
const logList = document.querySelector(".log-list");
let keypressCounter = 1;
console.log(clearLogBtn)
document.addEventListener("keydown", logMessage);
document.addEventListener("keyup", logMessage);
clearLogBtn.addEventListener("click", reset);
function logMessage({ type, key, code }) {
const markup = `<div class="log-item">
<ul>
<li><b>Event</b>: ${type}</li>
<li><b>Key</b>: ${key}</li>
<li><b>Code</b>: ${code}</li>
</ul>
</div>`;
logList.insertAdjacentHTML("afterbegin", markup);
}
function reset() {
keypressCounter = 1;
logList.innerHTML = "";
}
Para manejar una combinación de teclas, por ejemplo Ctrl + s o cualquier otra combinación de teclas, el objeto de evento tiene las propiedades ctrlKey, altKey, shiftkey y metaKey que almacenan un valor booleano que indica si la tecla modificadora fue presionada o no.
document.addEventListener("keydown", event => {
event.preventDefault();
if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") {
console.log("«Ctrl + s» or «Command + s» combo");
}
});
