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

13/Jun/2007 JavaScript , , , , 9 Comentarios

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.

  1. 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:

  1. function foco(idElemento){
  2. document.getElementById(idElemento).focus();
  3. }
  4. </script>

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:

  1. <form metho="POST" action="">
  2. Nombre: <input type="text" id="nombre"><br>
  3. Apellido1: <input type="text" id="apellido1"><br>
  4. Apellido2: <input type="text" id="apellido2"><br>
  5. Direccion: <input type="text" id="direccion"><br>
  6. </form>
  7.  
  8. <a href="#" id="enlace">Enlace que no enlaza con nada</a>

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:

  1. <form action="">
  2. <input type="button" value="Foco sobre formulario(nombre)" onClick="foco('nombre');">
  3. <input type="button" value="Foco sobre formulario(apellido2)" onClick="foco('apellido2');">
  4. <input type="button" value="Foco sobre el enlace" onClick="foco('enlace');">
  5. </form>

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

9 comentarios en “Hacer foco en un campo de la página usando Javascript”

Víctor Cuervo

wallshapel

el problema es que cuando son varios input text uno al lado de otro con la propiedad readonly en false, no es imposible pasar el foco por medio de las flechas del teclado al input text deseado, lo q si es imposible es q obtenga el foco y ademas con el texto seleccionado en su totalidad

Víctor Cuervo

Oliver

Disculpa estoy desarrollando un aplicación para una smart tv samsung, mi problema es que no se como hacer para que a través del control remoto me acepte el onClick y la navegación del foco entre los diferentes DIV creados, los cuales almacenan elementos creados con javascript. Necesito hacer algo similar al menú de windows 8 que al presionar las flechas el foco cambia de opción

Víctor Cuervo

Vary

No se si lo solucionaste, yo estoy igual que tu, por lo que he visto, practicamente tienes que crear el evento a tu medida por completo. Y con css imitar el efecto del foco. Si averiguaste algo en concreto te agradecería que lo compartieras.

Víctor Cuervo

Jose

Hola necesito hacer foco sobre un input onlyread y al hacer foco con tab que se ejecute una función . si me dan idea agradecería soy nuevo.

Víctor Cuervo

niki

Hola no me funciona el focus(): AUXILIO
AYUDA POR FAVOR
LO PRUEBO EN FIREFOX EN CHROME Y NADA

function valida_ruc(){
var number = document.getElementById(‘est_ruc’).value;
var dto = number.length;
var valor;
var acu=0;
if(number==””){
alert(‘No has ingresado ningún dato, por favor ingresar los datos correspondientes.’);
document.getElementById(‘est_ruc’).focus();

return true;
}
else{
for (var i=0; i24){
alert(‘Los dos primeros dígitos no pueden ser mayores a 24.’);
document.getElementById(‘est_ruc’).focus();
return true;

}
var porcion1 = number.substring(2,3);
if(porcion1<6){
alert('RUC CORRECTO El tercer dígito es menor a 6, PERSONA NATURAL.\n');
}
else{
if(porcion1==6){
alert(' RUC CORRECTO El tercer dígito es igual a 6, ENTIDAD PUBLICA.\n');
}
else{
if(porcion1==9){
alert(' RUC CORRECTO El tercer dígito es igual a 9, SOCIEDAD PRIVADA.\n');
}
}
}
}
else{
document.getElementById('est_ruc').focus();
alert("ERROR: Por favor no ingrese texto");

}
}

}

EN EL FORMULARIO LE LLAMO ASI, SI VALIDA PERO SE PASA AL SIGUIENTE CAMPO Y QUIERO QUE MIENTRAS NO ESCRIBA BIEN EL RUC NO PASE A OTRO CAMPO….
</

Víctor Cuervo

Víctor Cuervo

@Alexander,

Sobre un campo hidden no se puede hacer foco. Solo se puede hacer foco sobre elementos que estén visibles en la pantalla.

Saludos.

Víctor Cuervo

Alexander

hola esta muy bien explicado, pero tengu una duda y no se si pueda hacerse, el foco se podria poner en un campo tipo hidden? o no es posible hacerlo?

lo que pasa es que estoy haciendo una aplicacion y el logueo de ella quiero que se haga invisible, cabe resaltar que solo me logueo por nombre de password, y deseo que al digitar mi password automaticamente se realice el logueo pero que no se vea el password digitado.

si alguien conoce una forma de hacerlo loagradeceria

Víctor Cuervo

paty

HOLA…. Mil gracias, les comparto mi codigo de validacion

function validar(idelement,valueelement)
{
var numero = parseInt(valueelement);
var elemento = idelement;
if(numero != “” && numero != “0” && numero != “1” && numero != “2” && numero != “3” && numero != “4”)
{
document.getElementById(idelement).focus();
alert(“Valor incorrecto. Verifique respuesta: “+ idelement);
}
}

Víctor Cuervo

gabriela

esta muy completo, pero mi problema es el siguiente, tengo una tabla en un jsp con varias columnas, al momento de capturar ,se envia automaticamente al campo que esta en la parte derecha de el campo en el cual estoy haciendo ola captura, como puedo hacer que se envie al campo que esta abajo?

Es decir hacer una captura en forma vertical y luego al terminar con esa columna comenzar a capturar la siguiente

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*