JavaScript: Cómo Hacer Focus en un Elemento
Hacer foco (focus) en un elemento HTML significa que dicho elemento se activa para recibir entradas del usuario, como texto en un campo de formulario. En JavaScript, esto se logra utilizando el método focus(), que permite enfocar de manera programática un elemento específico en la página.
Uso Básico del Método focus()
El método focus() se puede utilizar en cualquier elemento que sea capaz de recibir el foco, como <input>, <textarea>, <button>, y enlaces (<a>). Aquí te mostramos cómo aplicar focus() a un campo de entrada:
document.getElementById("miInput").focus();
Este código se asegura de que el elemento con el id miInput reciba el foco cuando se ejecuta.
Ejemplos Prácticos de Focus en JavaScript
1. Enfocar un Campo de Texto al Cargar la Página:
Puedes hacer que un campo de entrada reciba el foco automáticamente cuando la página se carga:
window.onload = function() {
document.getElementById("miInput").focus();
};2. Enfocar un Botón al Hacer Clic en Otro Elemento:
Si deseas cambiar el foco a un botón después de que se haga clic en otro elemento, puedes hacerlo así:
document.getElementById("miOtroElemento").addEventListener("click", function() {
document.getElementById("miBoton").focus();
});3. Validación de Formulario y Focus en el Primer Error:
En formularios, es común enfocar automáticamente el primer campo que tiene un error:
function validarFormulario() {
let campo = document.getElementById("miInput");
if (campo.value === "") {
campo.focus();
return false;
}
return true;
}Consideraciones al Usar focus()
-
Accesibilidad: Usar
focus()de manera adecuada puede mejorar la accesibilidad de tu sitio web, asegurando que los usuarios que navegan con teclado o dispositivos de asistencia puedan interactuar eficazmente con los elementos de la página. - Focus y UX: Manipular el foco manualmente debe hacerse con cuidado para no interferir con la experiencia del usuario. Cambios inesperados de foco pueden confundir a los usuarios, especialmente en formularios largos.
-
Compatibilidad de Navegadores: La mayoría de los navegadores modernos soportan el método
focus()sin problemas, pero es recomendable probar tu implementación en distintos navegadores para asegurar una experiencia consistente.
Referencias a Sitios Oficiales
Jorge García
Fullstack developer