El Atributo ONINPUT

El atributo oninput es un evento de JavaScript que se activa inmediatamente cuando el usuario modifica el valor de un elemento de entrada (como <input>, <textarea>, o <select>). Es ideal para crear interacciones en tiempo real, como validaciones instantáneas, búsquedas dinámicas o actualizaciones de interfaz sin esperar a que el usuario termine de escribir.

¿Dónde se aplica?

Funciona en elementos interactivos que permiten entrada de datos:

• <input> (text, email, password, range, search, etc.).

• <textarea>.

• <select> (en algunos navegadores modernos).

Sintaxis básica

Como atributo HTML (inline):

<input type="text" oninput="console.log('Valor actual:', this.value)">

Con JavaScript (recomendado para separar lógica):

const input = document.getElementById("miInput");
input.addEventListener("input", (e) => {
  console.log("Valor modificado:", e.target.value);
});

Ejemplos prácticos

Ejemplo 1: Contador de caracteres en tiempo real

<textarea 
  id="mensaje" 
  placeholder="Escribe algo..."
  maxlength="200"
></textarea>
<p>Caracteres restantes: <span id="contador">200</span></p>

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

  textarea.addEventListener("input", () => {
    const restantes = 200 - textarea.value.length;
    contador.textContent = restantes;
    contador.style.color = restantes < 20 ? "red" : "black";
  });
</script>

Ejemplo 2: Búsqueda instantánea (live search)

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

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

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

Ejemplo 3: Control deslizante con valor dinámico

<input type="range" id="volumen" min="0" max="100" 
  oninput="actualizarValor(this.value)">
<p>Volumen: <span id="valorVolumen">50</span>%</p>

<script>
  function actualizarValor(valor) {
    document.getElementById("valorVolumen").textContent = valor;
  }
</script>

Diferencias clave entre eventos

Evento	Descripción	Momento de activación
oninput	Al modificar el valor (tiempo real)	Inmediatamente
onchange	Al confirmar el cambio (pierde el foco)	Al salir del campo
onkeyup	Al soltar una tecla (no captura otros cambios)	No cubre pegar/arrastrar

Mejores prácticas

Validación instantánea:

input.addEventListener("input", (e) => {
  if (!e.target.value.includes("@")) {
    mostrarError("Ingresa un correo válido");
  }
});

Debounce para operaciones pesadas:

Evita sobrecargar el navegador con muchas llamadas (ej: búsquedas API):

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

Accesibilidad:

Usa <label> asociado al input.

Proporciona mensajes accesibles con aria-live:

<div aria-live="polite" id="error-email"></div>

Casos avanzados

Editor Markdown en tiempo real:

<textarea id="editor" placeholder="Escribe en Markdown..."></textarea>
<div id="vistaPrevia"></div>

<script>
  document.getElementById("editor").addEventListener("input", (e) => {
    // Convertir Markdown a HTML (usando una librería como marked.js)
    document.getElementById("vistaPrevia").innerHTML = marked.parse(e.target.value);
  });
</script>

Formulario de presupuesto dinámico:

<input type="number" id="cantidad" placeholder="Cantidad" oninput="calcularTotal()">
<input type="number" id="precio" placeholder="Precio unitario" oninput="calcularTotal()">
<p>Total: $<span id="total">0</span></p>

<script>
  function calcularTotal() {
    const cantidad = document.getElementById("cantidad").value || 0;
    const precio = document.getElementById("precio").value || 0;
    document.getElementById("total").textContent = cantidad * precio;
  }
</script>

Errores comunes

<!-- MAL: Usar en elementos no interactivos -->
<div oninput="..."></div> <!-- No funciona -->

<!-- CONFUSIÓN: Esperar que funcione con todos los tipos de input -->
<input type="color" oninput="..."> <!-- Sí funciona en navegadores modernos -->

<!-- OLVIDAR sanitizar entradas -->
<script>
  input.addEventListener("input", (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	✅ v4+
Safari	✅ v5+
Edge	✅ Todas versiones
Móviles	✅ Sí (iOS/Android)

Conclusión

El atributo oninput es esencial para:

• Crear interacciones en tiempo real sin retrasos.
• Mejorar la experiencia del usuario con feedback inmediato.
• Validar formularios dinámicamente mientras el usuario escribe.

Recuerda:

1. No abuses para operaciones costosas (usa debounce/throttle).
2. Combínalo con onchange si necesitas validación final.
3. Prueba en todos los navegadores para garantizar consistencia.

¡Ahora puedes crear formularios y aplicaciones altamente interactivas!