El Atributo ONCHANGE

El atributo onchange es un evento de JavaScript que se activa cuando el usuario modifica el valor de un elemento y confirma el cambio (al salir del campo o seleccionar una opción). Es fundamental para validar formularios, actualizar contenido dinámico y manejar interacciones complejas.

¿Dónde se aplica?

Funciona en elementos interactivos que permiten cambios de valor:

• <input> (text, checkbox, radio, file, etc.)

• <select>

• <textarea>

Sintaxis básica

Como atributo HTML:

<input type="text" onchange="miFuncion()">

Con JavaScript (recomendado para separar lógica):

elemento.addEventListener('change', function(evento) {
  // Acciones al cambiar el valor
});

Ejemplos prácticos

Ejemplo 1: Validación de campo de texto

<input 
  type="email" 
  id="correo" 
  placeholder="Ingresa tu email"
  onchange="validarEmail(this)"
>

<script>
  function validarEmail(campo) {
    const regex = /^[^s@]+@[^s@]+.[^s@]+$/;
    if (!regex.test(campo.value)) {
      campo.style.border = '2px solid red';
      alert('¡Correo inválido!');
    } else {
      campo.style.border = '1px solid #ccc';
    }
  }
</script>

Ejemplo 2: Selector de país con actualización dinámica

<select id="pais" onchange="actualizarCiudades()">
  <option value="">Selecciona un país</option>
  <option value="mx">México</option>
  <option value="es">España</option>
</select>

<select id="ciudades" disabled>
  <option>Cargando ciudades...</option>
</select>

<script>
  function actualizarCiudades() {
    const pais = document.getElementById('pais').value;
    const ciudades = document.getElementById('ciudades');
    ciudades.disabled = false;

    // Simulación de datos
    const datos = {
      'mx': ['CDMX', 'Guadalajara', 'Monterrey'],
      'es': ['Madrid', 'Barcelona', 'Valencia']
    };

    ciudades.innerHTML = datos[pais]
      .map(ciudad => `<option>${ciudad}</option>`)
      .join('');
  }
</script>

Ejemplo 3: Carga de archivo con vista previa

<input 
  type="file" 
  id="imagen" 
  accept="image/*" 
  onchange="mostrarVistaPrevia(event)"
>
<img id="vistaPrevia" style="max-width: 300px; display: none;">

<script>
  function mostrarVistaPrevia(event) {
    const archivo = event.target.files[0];
    const vistaPrevia = document.getElementById('vistaPrevia');

    if (archivo) {
      const lector = new FileReader();
      lector.onload = (e) => {
        vistaPrevia.src = e.target.result;
        vistaPrevia.style.display = 'block';
      };
      lector.readAsDataURL(archivo);
    }
  }
</script>

Diferencias clave: onchange vs oninput

Característica	onchange	oninput
Momento de activación	Al perder el foco (blur)	En cada modificación (tiempo real)
Casos de uso	Validación final, envío de formularios	Búsquedas dinámicas, filtros
Elementos comunes	<select>, <input type="file">	<input type="text">, <textarea>

Mejores prácticas

Validación en capas:

// Validación en tiempo real + final
campo.addEventListener('input', validacionBasica);
campo.addEventListener('change', validacionCompleta);

Accesibilidad:

<label for="nombre">Nombre:</label>
<input 
  type="text" 
  id="nombre" 
  onchange="validarNombre()"
  aria-describedby="errorNombre"
>
<div id="errorNombre" role="alert"></div>

Manejo de archivos seguro:

const inputArchivo = document.getElementById('imagen');
inputArchivo.addEventListener('change', (e) => {
  const archivo = e.target.files[0];
  if (archivo.size > 5 * 1024 * 1024) { // 5MB máximo
    alert('Archivo demasiado grande');
    e.target.value = ''; // Limpiar selección
  }
});

Casos avanzados

Formulario multi-paso:

<div id="paso1">
  <input type="email" id="email" onchange="guardarPaso1()">
  <button onclick="mostrarPaso2()">Siguiente</button>
</div>

<div id="paso2" style="display: none;">
  <!-- Campos del paso 2 -->
</div>

<script>
  function guardarPaso1() {
    localStorage.setItem('email', document.getElementById('email').value);
  }

  function mostrarPaso2() {
    document.getElementById('paso1').style.display = 'none';
    document.getElementById('paso2').style.display = 'block';
  }
</script>

Filtros combinados:

<input type="text" id="busqueda" placeholder="Buscar...">
<select id="categoria" onchange="filtrarProductos()">
  <option value="">Todas</option>
  <option value="electronica">Electrónica</option>
</select>

<script>
  function filtrarProductos() {
    const texto = document.getElementById('busqueda').value.toLowerCase();
    const categoria = document.getElementById('categoria').value;
    
    // Lógica de filtrado combinado
  }
</script>

Errores comunes

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

<!-- CONFUSIÓN: Esperar respuesta inmediata -->
<input type="text" onchange="validar()"> 
<!-- Se activa solo al salir del campo -->

<!-- OLVIDAR limpiar valores -->
<input type="file" onchange="subirArchivo()">
<!-- El valor persiste hasta recargar la página -->

Compatibilidad

Navegador	Soporte
Chrome	✅ Todas versiones
Firefox	✅ Todas versiones
Safari	✅ Todas versiones
Edge	✅ Todas versiones
Móviles	✅ Total (iOS/Android)

Cómo desactivar el evento

// Eliminar listener específico
const campo = document.getElementById('miCampo');
campo.removeEventListener('change', miFuncion);

// Desactivar completamente
campo.onchange = null;

Conclusión

El atributo onchange es ideal para:

• Validar datos después de la interacción completa del usuario.
• Actualizar contenido dependiente de selecciones.
• Manejar archivos y entradas complejas.

Recuerda:

• Combínalo con oninput para validación en tiempo real.
• Usa addEventListener para mantener tu código limpio y mantenible.
• Prueba en diferentes dispositivos para garantizar el comportamiento esperado.

¡Ahora puedes crear formularios interactivos y profesionales con manejo robusto de datos!