ASP.NET : focus par défaut sur un contrôle de saisie

Ceci vous est certainement déjà arrivé : vous ouvrez une page Web qui contient un formulaire, vous commencez à remplir les cases du formulaire... et rien ne s'écrit à l'endroit désiré. Frustrant ! Le développeur de ce formulaire n'était pas très consciencieux.

Il est pourtant simple pour un développeur de donner le focus à un contrôle dès le chargement de la page. L'usager n'aura donc pas à cliquer sur le premier contrôle de saisie avant de commencer à taper. Quelques techniques vous sont présentées ici.

▼Publicité

Propriété DefaultFocus

La première technique permettant de donner le focus à un contrôle consiste à utiliser la propriété DefaultFocus du contrôle serveur <form>.

Ex :

Fichier .aspx (ASP.NET)

<form id="formDefault" runat="server" defaultfocus="textBoxBoiteDeSaisie">

Méthode Focus()

Il est également possible d'utiliser la méthode Focus() sur le contrôle désiré.

Ex :

Fichier .aspx.cs (ASP.NET avec C#)

textBoxBoiteDeSaisie.Focus();

jQuery.focus()

Il est également possible de donner le focus à un contrôle à l'aide du code exécuté côté client. La méthode focus() de jQuery est toute indiquée pour cela.

Ex :

jQuery (placé dans un fichier .aspx afin de pouvoir utiliser l'affichage direct d'une expression avec <%= ... %>)

$(function() {

    $('#<%= textBoxBoiteDeSaisie.ClientID %>').focus();

});

Notez l’utilisation de la propriété ASP.NET ClientID. Cette propriété, dont la valeur sera sous la forme "ctl00_contentPlaceHolderCorpsPage_textBoxBoiteDeSaisie", contient la valeur de l'attribut id du contrôle HTML généré par le contrôle serveur.

Sa valeur est construite à partir de l'identifiant du contrôle serveur, précédé de l'identifiant de son parent et, possiblement, celui du parent de son parent, de façon à ce que la valeur soit unique sur la page.

Ex :

HTML

<input name="ctl00$contentPlaceHolderCorpsPage$textBoxBoiteDeSaisie" type="text" id="ctl00_contentPlaceHolderCorpsPage_textBoxBoiteDeSaisie" ... />

Il existe également une propriété UniqueID qui, elle, fait référence à l'attribut name du contrôle HTML. Elle contiendra une valeur identique à ClientID à l'exception que les _ seront remplacés par des $. 

Alors que ClientID est utilisé principalement pour effectuer des opérations du DOM (Document Object Model), UniqueID servira à des opérations relatives au PostBack d'une page. 

Contrôle défini dans une page enfant

Lorsque le contrôle est défini sur une page enfant, on peut ajouter l’instruction suivante dans le Page_Load de la page enfant (attention : pas dans le Page_Load de la page maîtresse) :

Fichier .aspx.cs de la page enfant (ASP.NET avec C#)

this.Form.DefaultFocus = this.textBoxBoiteDeSaisie.ClientID;

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories