Teclado

Eventos de enfoque de teclado

Con el estilo CSS :focus podemos hacer detectar cuando un elemento tiene el enfoque del teclado sin necesidad de codificarlo en Javascript

Eventos de pulsación de teclas

Estos eventos se pueden añadir de forma general al document o de forma particula a cada input o textarea que necesitemos.

El evento keydown ocurre antes de que la tecla sea enviada (antes de que esté en el .value). Podemos eliminar la tecla para que nunca llegue con event.preventDefault().

Cuando ocurre el evento keyup la tecla ya está en el .value del elemento.

Parámetro Event de estos eventos

La utilidad de esto evento es la siguiente:

Ejemplos de eventos de teclado

Mostrar todas las teclas pulsadas en la consola:

    documento.addEventListener('keydown', atenderTeclado);
    function atenderTeclado(evento) {
        console.log(evento.key);
    }

Poner todo el texto escrito en mayúsculas:

    input.addEventListener('keyup', ponerMayusculas);
    function ponerMayusculas(evento) {
        const input = evento.target;
        input.value = input.value.toUpperCase();
    }

No dejar escribir números:

    input.addEventListener('keydown', atenderTeclado);
    function atenderTeclado(evento) {
        const NUMS = ['0','1','2','3','4','5','6','7','8','9'];
        if (NUMS.includes(evento.key) {
            evento.preventDefault();
        }
    }

Posición del cursor que parpadea.

Proinf.net