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:
Enlace que no enlaza con nadaPodemos 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:
nelson
Hola como estan. estoy intentando entender como funciona esto del focus, pero al implementarlo.
window.onload = function () {
document.formularioContacto.cliente_rut.focus();
document.formularioContacto.addEventListener(‘submit’, validarCampoVacio);
}
creo que esto deberia aplicar solo para el campo del rut, pero me aplica para todos los campos del formulario.
creo que implementando la funcion que se muestra arriba.
function foco(idElemento){
document.getElementById(idElemento).focus();
}
puedo especificar a que campo quiero que aplique, pero no se como implementar esta funcion en mi codigo, ya que tengo varios campos (input)y quiero implementar otras funciones. entonces estoy confundido.
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
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
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.
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.
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
@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.
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
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);
}
}
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