Activer automatiquement le premier champs d’un formulaire – Prototype

La saisie de données est et reste l’action la plus courante lorsque l’on visite un site web. S’il est vrai qu’il est souvent pénible à mettre en page, le formulaire HTML standard reste aussi une vraie plaie à compléter.

Une bonne pratique – très souvent oubliée, et par moi en premier – consiste à sélectionner automatiquement le premier champs disponible sur le formulaire. Cela permet en effet de supprimer une étape dans le processus de complétion : celle où l’utilisateur va devoir bouger sa main pour sélectionner ledit champs et, potentiellement, réfléchir et décider d’abandonner son action.

Pour éviter ce genre de désagrément, je vous propose donc la fonction suivante :

// Automagicaly select the first field of a form, if any, within the div#content
// (this exclude potential form within sidebar, footer, etc)
 
$(document).observe('dom:loaded', function(){
	var firstForm = $$('#content form').first();
	if(firstForm != null){
		var firstElement = Form.getElements(firstForm).find(function(element) {
		    return element.type != 'hidden' & !element.disabled &
		    ['input', 'textarea'].include(element.tagName.toLowerCase());
		});
		if(firstElement != null)
		    firstElement.activate();	
	}
});

Source : How to select the first child form element (using prototype)?

En clair et en français : On recherche, au sein du div#content un éventuel formulaire. Si ce dernier existe, on recherche, parmis ses élements, le premier champs de type input ou textarea qui n’est ni désactivé ni caché, en somme, le premier champs de saisie de texte qui nous intéresse. Une fois ce champs trouvé, on lui donne le focus, tout simplement.

Désormais, vous n’avez plus d’excuses – et moi non plus.