Hacer foco en un campo de la página usando Javascript

Vía JavaScript tenemos mecanismos para poder posicionarnos en un elemento de la página. Esto, por ejemplo, nos puede ser muy útil para posicionarnos en un campo concreto de un formulario, ya sea al principio del formulario o por validaciones que vayamos haciendo y que nos hagan ir a otro campo del formulario.

Pero no solo nos sirve para hacer foco en campos de formulario. También podemos hacer foco en otros elementos selecionables de una página como podría ser el caso de un enlace.

El método que nos sirve para hacer foco es .focus(). Este método se aplicará sobre uno de los elementos indicados anteriormente.

elemento.focus();

En nuestro caso vamos a intentar que sea algo genérico el hacer el foco sobre un elemento. Es por ello que vamos a codificar una función que nos ayude a poner el foco en un elemento, pasándose el id del elemento como parámetro.

De esta manera, la función quedará de la siguiente forma:

function foco(idElemento){
 document.getElementById(idElemento).focus();
}

Utilizamos el método getElementById para obtener la referencia al objeto mediante el ID recibido como parámetro. Sobre dicho objeto ejecutaremos el método .focus().

Ojo con las mayúsculas del método getElementById. JavaScript es un lenguaje sensible a mayúsculas y si no respetas la codificación puedes perder mucho tiempo buscando los errores

Es por ello, que si diseñamos una página web con formulario o enlaces, simplemente tendremos que utilizar el método .focus(idElemento) para posicionarnos sobre un elemento.

De esta forma, si partimos de la siguiente página web HTML:

Nombre: 

Apellido1: 

Apellido2: 

Direccion: 



Enlace que no enlaza con nada

Podemos utilizar el método .focus(idElemento) para posicionarnos en los diferentes elementos. Así, podemos crear botones que invoquen a la función JavaScript. Veamos el código:

Publicaciones relacionadas:

Cálculo de totales y subtotales en JavaScript Contar checkbox activos con JavaScript Validar password con JavaScript Activar valores de un combo dinámicamente Cambiar el valor de un radio group dinámicamente