Eventos focus y blur en JavaScript

JavaScript es un lenguaje versátil que puede mejorar la interactividad de las aplicaciones web. Una de las áreas clave donde destaca JavaScript es en la gestión de la entrada del usuario mediante eventos de focus y blur. Este artículo profundiza en cómo utilizar eficazmente estos eventos para mejorar el manejo de formularios, la validación de la entrada del usuario y la experiencia general del usuario.

Comprender focus y blur en JavaScript

El evento focus se produce cuando un elemento se convierte en el objetivo activo de las pulsaciones de teclas y los clics del ratón. Por el contrario, el evento blur ocurre cuando un elemento pierde el enfoque. Ambos eventos son cruciales en la validación de formularios y en campos de entrada dinámicos. Ten en cuenta que focus y blur no se propagan (bubbling). Si necesitas delegación de eventos, utiliza focusin y focusout en su lugar.

Cómo implementar eventos focus

Para utilizar el evento focus, puedes adjuntar un oyente de eventos a un elemento. Aquí tienes un ejemplo de cómo añadir un evento focus a un campo de entrada que resalta el campo cuando obtiene el enfoque:

---

<input type="text" id="nameInput" placeholder="Enter Your Name">
<script>
  document.getElementById('nameInput').addEventListener('focus', function(event) {
    event.target.style.backgroundColor = 'lightblue';
  });
</script>

Try it Yourself »

Este fragmento de código cambia el fondo del campo de entrada a azul claro cuando está enfocado, mejorando la interfaz de usuario al indicar dónde está escribiendo actualmente. Para un estilo sencillo, considera usar la pseudo-clase de CSS `:focus` como una alternativa estándar sin JavaScript:

input:focus {
  background-color: lightblue;
}

Cómo implementar eventos blur

De manera similar, el evento blur puede utilizarse para validar la entrada cuando el usuario se desplaza a otro campo. Así es como puedes validar una dirección de correo electrónico cuando el campo de entrada pierde el enfoque:

---

<input type="email" id="emailInput" placeholder="Enter Your Email">
<script>
  document.getElementById('emailInput').addEventListener('blur', function(event) {
    // Simplified regex for educational purposes
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(event.target.value)) {
      alert('Please enter a valid email address.');
      event.target.style.backgroundColor = 'salmon';
    } else {
      event.target.style.backgroundColor = 'lightgreen';
    }
  });
</script>

Try it Yourself »

Este script verifica si el correo electrónico ingresado coincide con un formato estándar y alerta al usuario si la entrada es inválida. El color de fondo cambia a verde si es válido y a salmón si no es así, proporcionando una retroalimentación visual inmediata.

Técnicas avanzadas: Gestión de múltiples campos

Cuando un usuario completa correctamente un campo de formulario, puedes cambiar automáticamente el enfoque al siguiente campo al salir del campo actual. Esto agiliza la finalización del formulario al eliminar la necesidad de clics manuales. Así es como puedes implementar este comportamiento:

---

<input type="text" id="firstName" placeholder="First Name" />
<input type="text" id="lastName" placeholder="Last Name" />
<div id="error" style="color: red;"></div> <!-- Display error message here -->
<script>
  document.getElementById('firstName').addEventListener('blur', validateFirstName);

  function validateFirstName(event) {
    const input = event.target;
    const errorDiv = document.getElementById('error');
    // Allow only letters and spaces, must not be empty
    const nameRegex = /^[A-Za-z ]+$/;
    if (!nameRegex.test(input.value)) {
      errorDiv.textContent = 'Please enter a valid first name.'; // Display error message
      input.style.backgroundColor = 'salmon'; // Set background to salmon on invalid input
      input.focus(); // Keep focus on the first name input to encourage correction
    } else {
      input.style.backgroundColor = 'white'; // Reset background to white on valid input
      errorDiv.textContent = ''; // Clear error message
      document.getElementById('lastName').focus(); // Optionally move focus to the last name input
    }
  }
</script>

Try it Yourself »

Este ejemplo cambia automáticamente el enfoque al campo de entrada lastName una vez que se ingresa un nombre válido, mejorando la experiencia del usuario al reducir la necesidad de clics manuales.

Conclusión

Dominar el uso de los eventos focus y blur en JavaScript puede mejorar significativamente la funcionalidad y la capacidad de respuesta de las páginas web. Al implementar estas técnicas, los desarrolladores pueden crear formularios y aplicaciones más interactivos y fáciles de usar. Esta guía no solo proporciona ejemplos de código prácticos, sino que también ofrece una visión de las potentes capacidades de JavaScript para gestionar las interacciones del usuario.

Práctica

¿Cuáles de las siguientes afirmaciones son correctas sobre los eventos focus y blur en JavaScript?

El evento focus se activa cuando un elemento recibe el enfoque, ya sea mediante un clic del ratón o por navegación con la tecla Tab.El evento blur se activa cuando un elemento pierde el enfoque, lo cual puede ocurrir al hacer clic fuera del elemento.Puedes evitar que un elemento pierda el enfoque utilizando el método event.preventDefault() en el controlador del evento blur.Los eventos focus y blur se pueden aplicar a cualquier elemento HTML de forma predeterminada sin atributos adicionales.Usando 'tabindex', puedes habilitar los eventos focus y blur en elementos no interactivos como <div> y <span>.