Posicionarse en el primer elemento de un formulario

02/Mar/2007 Prototype Deja un comentario

Si queremos facilitar la vida a nuestros usuarios, nos deberemos de preocupar de ayudarles a la hora de manipular nuestras páginas HTML. Por ejemplo, si tenemos un formulario para capturar los datos, una gran ayuda para el usuario será el posicionarse el cursor en el primer campo del formulario.

El framework javascript Prototype nos ayuda a realizarlo de una forma muy sencilla. Y es que Prototype tiene un objeto Form, el cual tiene una gran cantidad de métodos para manipular los formularios: habilitarlos, deshabilitarlos, limpiarles,... y, por supuesto, para posicionarnos en el primer elemento del formulario.

En este caso, el método para posicionarnos en el primer elemento será .focusFirstElement, el cual recibirá el formulario (el propio formulario, no el id que identifica el formulario) que queremos manipular.

Form.focusFirstElement(formulario);

Para pasarle el formulario como parámetro nos podemos apoyar en otra función de Prototype. La función $. Esta simple función nos devuelve un elemento DOM pasándole el id del elemento como parámetro.

De esta manera el código nos quedaría de la siguiente forma:

Form.focusFirstElement($('peticion'));

Es importante saber que para que nuestro código funcione (en nuestro ejemplo), el formulario se tiene que identificar mediante el nombre 'peticion'. Es por ello que el formulario sería algo así:

<form id="peticion">
</form>

Lo bueno de este código es que se posiciona en el primer elemento habilitado. Es decir, que si los primeros campos están desahbilitados o son de solo consulta, los omite. De esta manera se situaría en el primer campo hábil.

Y no se os olvide cargar el framework Prototype en la cabecera de la página.

Visualizar el ejemplo | Descargar el código

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

¿Algo que nos quieras comentar?

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

*

*