Teclado

Eventos de enfoque de teclado

• onFocus al entrar el cursor dentro
• onBlur al salir el cursor

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

• onKeyDown al presionar la tecla.
• onKeyUp al soltar la tecla
• onKeyPress al presionar y soltar la tecla

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:

• event.key = La tecla que ha sido pulsada
• event.target = El elemento que ha lanzado el evento. Normalmente un INPUT o TEXTAREA

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.

• input.selectionStart Indica la posición del cursor o el inicio de la selección de texto.
• input.selectionEnd Indica la posición del cursor o el final de la selección de texto.