6.4 Focus et Selection

Écrit par Neil Deakin , mise à jour par les contributeurs à MDC .
Traduit par Adrien Bustany (19/07/2004), mise à jour par Cyril trumpler (15/04/2005) , Alain B. (04/04/2007) .
Page originale : http://developer.mozilla.org/en/docs/XUL_Tutorial/Focus_and_Selection

Attention : Ce tutoriel est ancien et n'est pas mis à jour. Bien que beaucoup d'informations soient encore valables pour les dernières versions de gecko, beaucoup sont aussi obsolètes. Il est préférable d'aller consulter cette page sur la version française de ce tutoriel sur developer.mozilla.org.

Cette section va décrire comment manipuler le focus et la sélection des éléments.

Éléments focalisés

L'élément focalisé est l'élément qui reçoit les événements entrants. S'il y a trois champs de saisie sur une fenêtre, celui qui détient le focus est celui dans lequel l'utilisateur peut taper du texte. Un seul élément à la fois peut détenir le focus.

L'utilisateur peut changer le focus en cliquant sur un élément avec la souris ou en appuyant sur la touche Tab (tabulation). Lorsque la touche tabulation est appuyée, le focus passe à l'élément suivant. Pour revenir en arrière, il suffit d'appuyer sur les touches Maj (shift) et Tab simultanément.

Réarrangement de l'ordre des tabulations

Vous pouvez changer l'ordre dans lequel les éléments seront focalisés quand l'utilisateur appuiera sur la touche Tab en ajoutant un attribut tabindex à un élément. Cet attribut doit être renseigné avec un nombre. Lorsque l'utilisateur appuiera sur la touche Tab, le focus sera donné à l'élément ayant l'index de tabulation consécutif le plus haut. Cela implique que vous pouvez ordonner les éléments en définissant des indices pour séquencer les éléments. Toutefois, vous n'aurez normalement pas à définir l'attribut tabindex. Dans ce cas, un appui sur la touche tabulation donnera le focus à l'élément suivant affiché. Vous avez seulement besoin de définir des indices de tabulation si vous voulez utiliser un ordre différent. Voici un exemple :

Exemple 6.4.1 : Source Voir

<button label="Bouton 1" tabindex="2"/>
<button label="Bouton 2" tabindex="1"/>
<button label="Bouton 3" tabindex="3"/>

L'événement focus

L'événement 'focus' est utilisé pour réagir lorsqu'un élément obtient le focus. L'événement 'blur' est utilisé pour réagir lorsqu'un un élément perd le focus. Vous pouvez réagir aux changements de focus en ajoutant un attribut onfocus ou onblur à un élément. Ils fonctionnent de la même façon que leurs homologues HTML. Vous pouvez utiliser ces événements pour mettre un élément en surbrillance ou afficher un texte dans la barre d'état. L'exemple suivant peut s'appliquer à une fonction de gestion des événements de focus.

Exemple 6.4.2 : Source Voir

<script>

function displayFocus() {
  var elem=document.getElementById('sbar');
  elem.setAttribute('value','Entrez votre numéro de téléphone.');
}

</script>

<textbox id="tbox1"/>
<textbox id="tbox2" onfocus="displayFocus();"/>
<description id="sbar" value=""/>

Quand l'événement 'focus' est déclenché, il va appeler la fonction displayFocus. Cette fonction va changer la valeur du libellé texte. Nous pourrions développer cet exemple pour effacer le texte quand l'événement 'blur' a lieu. Généralement, vous utiliserez les événements focus et blur pour mettre à jour certaines parties de votre interface, quand l'utilisateur sélectionne des éléments. Par exemple, vous pouvez mettre à jour un total quand l'utilisateur entre des valeurs dans d'autres champs, ou utiliser les événements de focus pour vérifier certaines valeurs. N'affichez pas de messages d'alerte pendant un événement focus ou blur, car ils pourraient distraire l'utilisateur et ils dégradent le design de l'interface.

Vous pouvez aussi ajouter dynamiquement des gestionnaires d'événements en utilisant la fonction DOM addEventListener. Vous pouvez l'utiliser pour n'importe quel élément et type d'événement. Elle prend trois paramètres : le type d'événement, une fonction à exécuter quand l'événement est produit et un booléen indiquant la phase de capture de l'événement.

Obtention de l'élément actuellement focalisé

L'élément ayant le focus est pris en charge par un objet appelé « répartiteur de commandes », dont il ne peut y avoir qu'une instance par fenêtre. Le répartiteur de commandes garde la trace de l'objet qui a le focus pendant que l'utilisateur se sert de l'interface. Le répartiteur de commandes a d'autres rôles, qui seront abordés plus tard dans la section des commandes. Pour le moment, nous allons nous intéresser à quelques fontions relatives au focus du répartiteur de commandes.

Vous pouvez récupérer le répartiteur de commandes d'une fenêtre en utilisant la propriété commandDispatcher du document. À partir de là, vous pouvez obtenir l'élément focalisé avec la propriété focusedElement du répartiteur. L'exemple ci-dessous illustre ce cas.

Exemple 6.4.3 : Source Voir


<window id="focus-example" title="Exemple Focus"
        onload="init();"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script>
function init() {
  addEventListener("focus",setFocusedElement,true);
}

function setFocusedElement() {
  var focused = document.commandDispatcher.focusedElement;
  document.getElementById("focused").value = focused.tagName;
}
</script>

<hbox>
  <label control="username" value="Nom d'utilisateur:"/>
  <textbox id="username"/>
</hbox>

<button label="Bonjour"/>
<checkbox label="Se souvenir de ce choix"/>

<label id="focused" value="-pas de focus-"/>

</window>

Dans cet exemple, un gestionnaire d'événement de focus est attaché à la fenêtre. Nous voulons utiliser un gestionnaire de capture d'événements, donc la méthode addEventListener doit être utilisée. Elle associe un gestionnaire de capture d'événements à la fenêtre qui appellera la méthode setFocusedElement. Cette méthode récupère l'élément focalisé depuis le répartiteur de commandes et modifie un libellé avec le nom de sa balise. Quand l'élément focalisé change, le libellé montre le nom de l'élément.

Plusieurs choses sont à noter :

Premièrement, quand le champ de saisie est focalisé, le nom de la balise est 'html:input', et non 'textbox' comme on aurait pu s'y attendre. C'est parce que les champs de saisie XUL sont implémentés avec le composant HTML 'input', donc l'événement focus est en fait reçu pour cet élément.
Deuxièmement, un clic sur le libellé du champ de saisie donne le focus au champ de saisie. C'est parce que le libellé possède un attribut control pointant vers l'id du champ de saisie.
Enfin, l'autre libellé qui affiche la propriété nom n'a pas d'attribut control, donc un clic dessus n'affecte pas l'élément focalisé. Seuls les éléments focalisables peuvent être focalisés.

Rendre un libellé focalisable

Si vous créez des éléments personnalisés, vous pouvez décider si un élément peut prendre le focus ou non. Il vous suffit d'utiliser la propriété de style spéciale -moz-user-focus. Cette propriété détermine si un élément peut être focalisé ou non. Par exemple, vous pouvez rendre un libellé focalisable, comme dans l'exemple ci-dessous.

Exemple 6.4.4 : Source Voir

<label id="focused" style="-moz-user-focus: normal;"
          onkeypress="alert('Étiquette focalisée');" value="Focalise moi"/>

La propriété de style est réglée à normal. Vous pouvez aussi la définir à ignore pour désactiver le focus pour un élément. Toutefois, elle ne doit pas être utilisée pour désactiver un élément ; l'attribut ou la propriété disabled doit être utilisée dans ce cas, car elle a été conçue pour. Dans l'exemple, une fois le libellé focalisé, il peut réagir aux événements du clavier. Évidemment, le libellé ne donne aucune indication sur son focus, car il n'est normalement pas prévue pour cet usage.

Changer le focus

Il existe plusieurs façons de changer d'élément focalisé. La plus simple est d'appeler la méthode focus de l'élément XUL que vous voulez focaliser. La méthode blur peut être employée afin d'enlever le focus d'un élément. L'exemple suivant met en pratique ces principes :

Exemple 6.4.5 : Source Voir

<textbox id="addr"/>

<button label="Focus" oncommand="document.getElementById('addr').focus()"/>

Vous pouvez aussi utiliser les méthodes advanceFocus et rewindFocus du répartiteur de commandes. Ces méthodes changent le focus respectivement vers l'élément suivant ou précédent de la séquence de tabulation. Elles correspondent aux actions réalisées lorsque l'utilisateur appuie sur Tab ou Maj+Tab.

Pour les champs de saisie, un attribut spécial, focused est ajouté quand l'élément obtient le focus. Vous pouvez vérifier la présence de cet attribut pour déterminer si l'élément a le focus, soit depuis un script, soit depuis une feuille de styles. Il aura la valeur true si le champ de saisie a le focus, et le cas échéant, l'attribut ne sera pas présent.

Supposons que vous souhaitez déplacer le focus vers le prochain emplacement connu par le navigateur. pour y arriver, un utilisateur va typiquement appuyer sur la touche Tab. Vous pouvez faire la même chose dès lors que vous disposez d'un document de navigation XUL en faisant :

document.commandDispatcher.advanceFocus();

En fait, l'objet commandDispatcher implémente simplement l'interface nsIDOMXULCommandDispatcher. D'autres fonctions peuvent également vous intéressez si vous manipulez des focus.

Comportements spécifiques de plate-forme

Mac OS X: Il existe une préférence appelée « Full Keyboard Access » (FKA - Accès au clavier complet). XUL respecte ce mécasnisme. Cela signifie que si la préférence FKA est sur off, seuls les champs de saisie, les listes et les arbres peuvent recevoir le focus au clavier, ainsi que vos scripts utilisant focus().

Gestion des modifications de texte

Deux événements peuvent être utilisés lorsque l'utilisateur modifie la le contenu d'un champ de saisie. Naturellement, ces événements seront uniquement transmis au champ de saisie ayant le focus.

L'événement 'input' est transmis chaque fois que le contenu du champ est modifié. La nouvelle valeur sera différente de l'ancienne. Vous devriez utiliser cet événement au lieu d'utiliser les événements clavier, car certaines touches, par exemple Maj, ne modifient pas la valeur. De plus, l'événement 'input' ne se déclenche pas si une touche est enfoncée et s'il y a déjà plus de caractères dans le champ de saisie qu'il ne peut en contenir.
L'événement 'change' est similaire dans le sens où il est transmis seulement lorsque le champ est modifié. Cependant, cet événement n'est déclenché qu'au moment où le champ de saisie perd le focus, et seulement si son contenu a été modifié.

Sélection de texte

Lorsque vous travaillez avec un champ de saisie, vous pouvez récupérer uniquement le texte que l'utilisateur a sélectionné. Ou alors vous pouvez changer la sélection.

Les champs de saisie XUL offrent la possibilité de récupérer et de modifier une sélection. La plus simple et de sélectionner tout le texte du champ. Cela implique l'utilisation de la méthode select du champ de saisie.

tbox.select();

Toutefois, vous pouvez aussi sélectionner seulement une partie du texte. Il vous suffit d'utiliser la fonction setSelectionRange. Elle prend deux paramètres, le premier représente le caractère de départ et le second le caractère suivant le dernier que vous voulez sélectionner. Les valeurs commencent à zéro, donc le premier caractère est indicé à 0, le second à 1 et ainsi de suite.

tbox.setSelectionRange(4,8);

Cet exemple va sélectionner le cinquième caractère affiché, ainsi que le sixième, le septième et le huitième. S'il n'y avait que six caractères présents dans le champ, seuls le cinquième et le sixième auraient été sélectionnés. Aucune erreur ne serait signalée.

Si vous utilisez la même valeur pour les deux paramètres, le début et la fin de la sélection changent pour la même position. Le résultat revient à changer la position du curseur dans le champ de saisie. Par exemple, la ligne ci-dessous peut être utilisée pour ramener le curseur au début du texte.

tbox.setSelectionRange(0,0);

Vous pouvez récupérer la sélection en cours en utilisant les propriétés selectionStart et selectionEnd. Ces propriétés définissent respectivement le début et la fin de la sélection. Si les deux sont définies à la même valeur, aucun texte n'est sélectionné, mais les valeurs représentent la position du curseur. Une fois que vous avez les valeurs de début et de fin, vous pouvez récupérer la section de chaîne du texte.

Vous pouvez récupérer et modifier le contenu du champ de saisie en utilisant la propriété value.

Une autre propriété utile des champs de saisie est la propriété textLength qui contient le nombre total de caractères dans le champ.

Dans la prochaine section, nous découvrirons comment utiliser les commandes.