Ejemplo de Evento Keyup

Aprenderás a utilizar el evento keyup para capturar el texto ingresado en un campo de entrada y mostrarlo en un párrafo.

Paso 1: Crear la Estructura Básica del HTML

Vamos a crear la estructura básica del documento HTML con un campo de entrada y un párrafo para mostrar el resultado.


<!-- Estructura básica del documento HTML -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Evento Keyup</title>
</head>
<body>
    <h1>Ejemplo de Evento Keyup</h1>
    
    <!-- Campo de entrada de texto -->
    <input type="text" id="textInput">
    <!-- Párrafo para mostrar el texto ingresado -->
    <p id="outputText"></p>
</body>
</html>

Paso 2: Añadir el Código JavaScript

Añadimos el código JavaScript para capturar el evento keyup y actualizar el párrafo con el texto ingresado.


<!-- Código JavaScript -->
<script>
    // Capturar los elementos del DOM
    const textInput = document.getElementById('textInput');
    const outputText = document.getElementById('outputText');

    // Agregar el evento 'keyup' al campo de texto
    textInput.addEventListener('keyup', (event) => {
        // Obtener el valor actual del campo de entrada y mostrarlo en el párrafo
        const textoIngresado = event.target.value;
        outputText.innerText = 'Texto ingresado: ' + textoIngresado;
    });
</script>

Explicación del Código

Este código realiza las siguientes tareas:

Descargar Archivos del Ejemplo: