Obtener el elemento activo de un formulario con JavaScript

Para obtener el elemento activo de un formulario en Internet Explorer lo podemos hacer facilmente con la propiedad activeElement pero en navegadores Mozilla, como Firefox, no existe esta propiedad, aunque eso no quiere decir que no podamos hacerlo.

Podemos averiguar qué elemento está activo recorriendo los elementos del formulario y asignándoles una función en el evento onfocus y onblur que nos permitirá averiguar qué elemento está activo.

var activeElement;

function blurFunc() {

activeElement = null; /* Cuando el elemento deja de estar activo el elemento activo pasa a ser nulo (null) */

}

function focusFunc(evento) {

if(!evento) { // Para IE

evento = window.event;
activeElement = evento.srcElement; /* Cuando un elemento se activa (focus) lo indicamos */

} else { // Para otros navegadores

activeElement = evento.target;

}
alert(activeElement.name); // Lo utilizaremos para hacer la prueba

}

function init() {

for (var i = 0; i < document.forms.length; i++) {

for(var j = 0; j < document.forms[i].elements.length; j++) {

document.forms[i].elements[j].onfocus = focusFunc;
document.forms[i].elements[j].onblur = blurFunc;

}

}

}

window.onload = init;

</script>

El código que acabamos de ver, lo pondremos entre <head> y </head>. Luego, para probarlo, utilizaremos este formulario entre <body> y </body>

<form name="WebTaller" action="">
Nombre: <input type="text" name="nombre">
Apellidos: <input type="text" name="apellidos">
<input type="button" name="activo" value="Enviar">
</form>

Cuando probemos este formulario, tanto con IE como con Firefox, al pulsar sobre un campo del formulario nos aparecerá una ventanan con el nombre del elemento activo.

Por Alex.
Director Técnico de WebTaller.

Usuarios que han visto este tema también han visto...

- Confirmar eliminar registro con Javascript
- Formulario que multiplica números en JavaScript
- La seguridad en JavaScript
- Cómo pasar variables entre páginas con javascript
- Abrir ventana centrada en pantalla con Javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento