Formation PUB770 : ASP.NET WebForms, H-2015 L'ergonomie

22.1 Focus par défaut sur un contrôle de saisie


Il est relativement facile de donner le focus à un contrôle en utilisant la propriété DefaultFocus du contrôle serveur <form>. Ceci permettra à l'usager de commencer à écrire dès le chargement de la page, sans avoir à cliquer sur le contrôle.

Ex :

Fichier .aspx (ASP.NET)

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

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();

▼Publicité Le texte se poursuit plus bas

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) :

Ex :

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

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

Notez l’utilisation de 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. 

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();

});

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Par Christiane Lagacé
Dernière révision le 18 août 2017
Merci de partager !

Site fièrement hébergé chez A2 Hosting.

Soumettre