Listado completo de tutoriales

Eventos: keydown y keyup

Estos dos eventos son similares a los eventos del mouse: mousedown, mouseup pero orientados al teclado del equipo.

El evento keydown se dispara cuando presionamos cualquier tecla del teclado, el evento keyup cuando soltamos una tecla.

Para probar el evento keyup implementaremos un programa que permita solo ingresar 140 caracteres y nos informe con un mensaje la cantidad de caracteres disponibles para seguir escribiendo.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <input type="text" id="texto" maxlength="140" size="140">
    <br>
    <p>Máxima cantidad de caracteres disponibles:<span id="cantidad">140</span></p>

    <script>
        document.getElementById('texto').addEventListener('keyup', presion);

        function presion() {
            let canti = document.getElementById('texto').value.length;
            let disponibles = 140 - parseInt(canti);
            document.getElementById('cantidad').innerHTML = disponibles;
        }
    </script>

</body>

</html>

Definimos un control text y lo limitamos a 140 como máximo:

<input type="text" id="texto" maxlength="140" size="140">

Disponemos un elemento span para mostrar la cantidad de caracteres como máximo a ingresar:

<p>Máxima cantidad de caracteres disponibles:<span id="cantidad">140</span></p>

Registramos el evento keyup para el control texto:

        document.getElementById('texto').addEventListener('keyup', presion);

Cada vez que se suelta la tecla cuando estamos escribiendo en el control de texto procedemos a extraer el valor del control texto y obtener mediante la propiedad length la cantidad de caracteres tipeados hasta este momento y seguidamente restamos a 140 el número de caractes tipeados y procedemos a mostrarlo en el elemento span:

        function presion() {
            let canti = document.getElementById('texto').value.length;
            let disponibles = 140 - parseInt(canti);
            document.getElementById('cantidad').innerHTML = disponibles;
        }

Retornar