El Atributo ONBLUR

El atributo onblur es un evento de JavaScript que se activa cuando un elemento pierde el foco (el usuario hace clic fuera de él o navega a otro elemento). Es especialmente útil para validar formularios, actualizar contenido dinámico o ejecutar acciones tras la interacción del usuario.

¿Dónde se aplica?

Funciona en elementos interactivos que pueden recibir foco:

• <input> (todos los tipos)

• <textarea>

• <select>

• <a> (con tabindex)

• Elementos con tabindex definido

Sintaxis básica

Como atributo HTML:

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

Con JavaScript (recomendado para separar lógica):

elemento.addEventListener('blur', function() {
  // Acciones al perder el foco
});

Ejemplos prácticos

Ejemplo 1: Validación básica de campo

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

<script>
  function validarEmail() {
    const email = document.getElementById('correo');
    const regex = /^[^s@]+@[^s@]+.[^s@]+$/;
    
    if (!regex.test(email.value)) {
      email.style.border = '2px solid red';
      alert('¡Email no válido!');
    }
  }
</script>

Ejemplo 2: Actualizar contenido dinámico

<input 
  type="text" 
  id="nombre" 
  onblur="actualizarSaludo()"
  placeholder="Tu nombre"
>
<p id="saludo"></p>

<script>
  function actualizarSaludo() {
    const nombre = document.getElementById('nombre').value;
    document.getElementById('saludo').textContent = 
      nombre ? `¡Hola, ${nombre}!` : '';
  }
</script>

Ejemplo 3: Formatear datos al salir del campo

<input 
  type="text" 
  id="telefono" 
  onblur="formatearTelefono(this)"
  placeholder="Número telefónico"
>

<script>
  function formatearTelefono(campo) {
    const numero = campo.value.replace(/D/g, ''); // Elimina no dígitos
    campo.value = numero.replace(/(d{3})(d{3})(d{4})/, '($1) $2-$3');
  }
</script>

Diferencias clave: onblur vs onchange

Evento	Se dispara cuando...
onblur	El elemento pierde el foco
onchange	El valor cambia Y el elemento pierde el foco

Mejores prácticas

Validación en tiempo real:

document.getElementById('contraseña').addEventListener('blur', function() {
  if (this.value.length < 8) {
    mostrarError('La contraseña debe tener al menos 8 caracteres');
  }
});

Accesibilidad:

Asegúrate de que las acciones por onblur no interfieran con la navegación por teclado (usando Tab).

Combina con onfocus para feedback accesible:

<input 
  type="text" 
  onfocus="mostrarInstrucciones()" 
  onblur="ocultarInstrucciones()"
>

No abuses del evento:

Evita ventanas emergentes (alert()) que interrumpan el flujo.

Usa mensajes discretos en el DOM:

<div id="error-email" class="error" hidden></div>

Casos de uso avanzados

Autoguardado de datos:

document.getElementById('editor').addEventListener('blur', function() {
  guardarEnLocalStorage('borrador', this.value);
});

Cálculos automáticos:

<input type="number" id="precio" onblur="calcularTotal()">
<input type="number" id="cantidad" onblur="calcularTotal()">
<p>Total: $<span id="total">0</span></p>

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

Errores comunes

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

<!-- CONFUSIÓN: Esperar validación inmediata -->
<input type="text" onblur="validar()"> 
<!-- validar() solo se ejecuta al salir del campo -->

<!-- OLVIDAR compatibilidad móvil -->
<!-- Algunos dispositivos pueden comportarse diferente al perder foco -->

Compatibilidad

Navegador	Soporte
Chrome	✅ Sí (todas versiones)
Firefox	✅ Sí (todas versiones)
Safari	✅ Sí
Edge	✅ Sí
Móviles	✅ Sí (con consideraciones)

Cómo eliminar el evento

// Eliminar listener específico
const input = document.getElementById('miInput');
input.removeEventListener('blur', miFuncion);

// Desactivar completamente
input.onblur = null;

Conclusión

El atributo onblur es ideal para:

• Validar datos después de la interacción del usuario
• Ejecutar acciones tras completar un campo
• Mejorar la experiencia de usuario en formularios

Recuerda:

1. Combínalo con otros eventos (onfocus, oninput) para un flujo completo.
2. Prioriza la accesibilidad en todas las implementaciones.
3. Usa estilos visuales claros para indicar errores o confirmaciones.

¡Ahora puedes crear formularios más interactivos y profesionales!