El Atributo ONKEYUP

El atributo onkeyup es un evento de JavaScript que se activa cuando el usuario suelta una tecla del teclado. Es útil para manejar interacciones que requieren una acción después de que se completa la pulsación de una tecla, como validaciones de formularios, búsquedas en tiempo real o controles basados en teclado.

¿Dónde se aplica?

Funciona en elementos que pueden recibir foco:

• <input> (todos los tipos: text, email, password, etc.).

• <textarea>.

• <select>.

• Elementos con tabindex (ej: <div tabindex="0">).

Sintaxis básica

Como atributo HTML (inline):

<input type="text" onkeyup="console.log('Tecla liberada:', event.key)">

Con JavaScript (recomendado):

const input = document.getElementById("miInput");
input.addEventListener("keyup", (e) => {
  console.log("Tecla liberada:", e.key);
});

Ejemplos prácticos

Ejemplo 1: Búsqueda en tiempo real

<input type="text" id="busqueda" placeholder="Buscar...">
<ul id="resultados"></ul>

<script>
  const datos = ["Manzana", "Banana", "Naranja", "Pera"];

  document.getElementById("busqueda").addEventListener("keyup", (e) => {
    const termino = e.target.value.toLowerCase();
    const lista = document.getElementById("resultados");
    lista.innerHTML = datos
      .filter(item => item.toLowerCase().includes(termino))
      .map(item => `<li>${item}</li>`)
      .join("");
  });
</script>

Ejemplo 2: Validación de contraseña

<input type="password" id="password" placeholder="Contraseña">
<p id="fortaleza" style="color: gray;">Seguridad: baja</p>

<script>
  document.getElementById("password").addEventListener("keyup", (e) => {
    const longitud = e.target.value.length;
    let mensaje = "Seguridad: ";
    if (longitud < 5) mensaje += "baja";
    else if (longitud < 8) mensaje += "media";
    else mensaje += "alta";
    document.getElementById("fortaleza").textContent = mensaje;
  });
</script>

Ejemplo 3: Contador de caracteres

<textarea id="mensaje" maxlength="100"></textarea>
<p>Caracteres restantes: <span id="contador">100</span></p>

<script>
  const textarea = document.getElementById("mensaje");
  const contador = document.getElementById("contador");

  textarea.addEventListener("keyup", () => {
    const restantes = 100 - textarea.value.length;
    contador.textContent = restantes;
  });
</script>

Propiedades clave del evento keyup

Accede a información útil desde el objeto event:

• event.key: Nombre de la tecla (ej: "Enter", "a", "ArrowLeft").

• event.code: Código físico de la tecla (ej: "KeyA", "Digit1").

• event.target: Elemento que recibió el evento (ej: el <input>).

• event.ctrlKey, event.shiftKey, event.altKey: Estado de teclas modificadoras.

Diferencias entre eventos de teclado

Evento	Descripción	Momento de activación
onkeydown	Al presionar una tecla (antes de soltar)	Inmediatamente
onkeyup	Al liberar una tecla	Después de soltar
oninput	Al cambiar el valor del campo (más eficiente)	Incluye pegar/arrastrar

Mejores prácticas

Usar oninput para feedback inmediato:

Si necesitas detectar cambios en tiempo real (ej: búsquedas), oninput es más eficiente.

Debouncing para operaciones costosas:

Evita sobrecargar el navegador con muchas llamadas:

let timeout;
input.addEventListener("keyup", (e) => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    buscarEnAPI(e.target.value);
  }, 300); // Espera 300ms después de la última pulsación
});

Accesibilidad:

Asegúrate de que los elementos sean navegables con Tab.

Usa aria-live para anunciar cambios:

<div aria-live="polite" id="feedback"></div>

Casos avanzados

Navegación con teclado en una lista:

<div class="item" tabindex="0">Opción 1</div>
<div class="item" tabindex="0">Opción 2</div>

<script>
  document.querySelectorAll(".item").forEach(item => {
    item.addEventListener("keyup", (e) => {
      if (e.key === "Enter") {
        item.click(); // Activa la opción al presionar Enter
      }
    });
  });
</script>

Calculadora interactiva:

<input type="text" id="pantalla" readonly>
<button onclick="agregarNumero(7)">7</button>
<button onclick="agregarNumero('+')">+</button>

<script>
  let expresion = "";
  const pantalla = document.getElementById("pantalla");

  function agregarNumero(valor) {
    expresion += valor;
    pantalla.value = expresion;
  }

  // Ejecutar cálculo al presionar Enter
  pantalla.addEventListener("keyup", (e) => {
    if (e.key === "Enter") {
      pantalla.value = eval(expresion);
      expresion = "";
    }
  });
</script>

Errores comunes

<!-- MAL: Usar en elementos no enfocables -->
<div onkeyup="..."></div> <!-- No funciona sin tabindex -->

<!-- CONFUSIÓN: No distinguir entre keyup y keydown -->
<input onkeyup="validar()"> <!-- Se activa después de soltar, no durante la pulsación -->

<!-- OLVIDAR sanitizar entradas -->
<script>
  input.addEventListener("keyup", (e) => {
    // ¡Inyección de código si se usa innerHTML sin sanitizar!
    resultado.innerHTML = e.target.value;
  });
</script>

Compatibilidad

Navegador	Soporte	Notas
Chrome	✅ Todas versiones
Firefox	✅ v1.5+
Safari	✅ v3.1+
Edge	✅ Todas versiones
Móviles	✅ Sí (iOS/Android)	Comportamiento variable en teclados virtuales

Conclusión

El atributo onkeyup es útil para:

• Manejar acciones después de liberar una tecla (ej: validar, buscar).
• Implementar atajos de teclado (ej: Enter para enviar formularios).
• Crear interacciones accesibles con navegación por teclado.

Recuerda:

1. Usa oninput para cambios en tiempo real (más eficiente).
2. Evita operaciones pesadas sin debouncing.
3. Combínalo con onkeydown para un control completo del teclado.

¡Ahora puedes crear experiencias interactivas y receptivas al teclado!