El Atributo ONFOCUS

El atributo onfocus es un evento de JavaScript que se activa cuando un elemento HTML recibe el foco, es decir, cuando el usuario selecciona o interactúa con él (mediante clic, tecla Tab, o programáticamente). Es esencial para mejorar la accesibilidad, validar formularios en tiempo real y crear interfaces interactivas.

¿Dónde se aplica?

Funciona en elementos que pueden recibir foco:

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

• <textarea>.

• <select>.

• <a> (si tiene href o tabindex).

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

Sintaxis básica

Como atributo HTML (inline):

<input type="text" onfocus="console.log('Campo enfocado')">

Con JavaScript (recomendado para separar lógica):

const input = document.getElementById("miInput");
input.addEventListener("focus", (e) => {
  e.target.style.backgroundColor = "#e3f2fd";
});

Ejemplos prácticos

Ejemplo 1: Resaltar campo activo

HTML:

<input type="email" placeholder="Correo electrónico" id="email">

CSS:

/* Estilo al recibir foco */
input:focus {
  border: 2px solid #2196F3;
}

.resaltado {
  background: #e3f2fd;
}

JavaScript:

document.getElementById("email").addEventListener("focus", function(e) {
  this.classList.add("resaltado");
});

document.getElementById("email").addEventListener("blur", function(e) {
  this.classList.remove("resaltado");
});

Ejemplo 2: Mostrar ayuda contextual

<input type="password" id="password" placeholder="Contraseña" onfocus="mostrarAyuda()">
<div id="ayuda" style="display: none;">Mínimo 8 caracteres</div>

<script>
  function mostrarAyuda() {
    document.getElementById("ayuda").style.display = "block";
  }

  document.getElementById("password").addEventListener("blur", () => {
    document.getElementById("ayuda").style.display = "none";
  });
</script>

Ejemplo 3: Validación temprana

<input type="number" id="edad" placeholder="Edad" onfocus="validarEdad(this)">

<script>
  function validarEdad(campo) {
    if (campo.value < 18) {
      campo.style.border = "2px solid red";
      mostrarError("Debes ser mayor de 18 años");
    }
  }
</script>

Diferencias clave entre eventos relacionados

Evento	Descripción	Momento de activación
onfocus	Al recibir foco	Al seleccionar el elemento
onblur	Al perder el foco	Al salir del elemento
onfocusin	Similar a onfocus, pero propaga el evento	Versión "burbujeante" de focus
onchange	Al cambiar el valor y perder el foco	Después de modificar el campo

Mejores prácticas

Accesibilidad:

Asegúrate de que los elementos enfocables sean navegables con el teclado (Tab).

Usa aria-describedby para vincular mensajes de ayuda:

<input id="username" aria-describedby="ayudaUsuario" onfocus="mostrarAyuda()">
<div id="ayudaUsuario" hidden>Ejemplo: usuario123</div>

No abuses de los estilos:

Evita cambios visuales bruscos que distraigan al usuario. Usa transiciones CSS suaves:

input { transition: background 0.3s ease; }

Manejo programático del foco:

Enfoca elementos dinámicamente usando .focus():

if (error) {
  document.getElementById("campoError").focus();
}

Casos avanzados

Enfoque en Single Page Applications (SPA):

// Enfocar el primer campo al cargar un formulario
window.addEventListener("load", () => {
  document.querySelector("form [autofocus]").focus();
});

// Enfocar después de una transición
setTimeout(() => {
  document.getElementById("busqueda").focus();
}, 500);

Validación en tiempo real con onfocus:

<input type="text" id="tarjeta" placeholder="Número de tarjeta" 
  onfocus="validarFormatoTarjeta(this)"
  oninput="validarFormatoTarjeta(this)"
>

<script>
  function validarFormatoTarjeta(campo) {
    const valor = campo.value.replace(/s/g, "");
    if (!/^d{16}$/.test(valor)) {
      campo.setCustomValidity("Número inválido");
    } else {
      campo.setCustomValidity("");
    }
  }
</script>

Errores comunes

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

<!-- CONFUSIÓN: No manejar el evento blur -->
<input onfocus="mostrarAyuda()"> <!-- La ayuda queda visible para siempre -->

<!-- SEGURIDAD: No sanitizar entradas -->
<script>
  input.addEventListener("focus", () => {
    // Ejecutar código no seguro sin validación
  });
</script>

Compatibilidad

Navegador/Dispositivo	Soporte	Notas
Chrome	✅ Todas versiones
Firefox	✅ Todas versiones
Safari	✅ Sí (v. 4+)
Edge	✅ Todas versiones
Móviles	✅ Sí (iOS/Android)	Algunos elementos requieren tabindex

Conclusión

El atributo onfocus es esencial para:

• Mejorar la usabilidad de formularios y elementos interactivos.
• Proporcionar feedback inmediato al usuario.
• Garantizar accesibilidad mediante navegación por teclado.

Recuerda:

1. Combínalo con onblur para manejar ciclos completos de interacción.
2. Prueba en múltiples navegadores y dispositivos táctiles.
3. Prioriza la accesibilidad para todos los usuarios.

¡Ahora puedes crear interfaces más intuitivas y profesionales con el manejo adecuado del foco!