6.3 Raccourcis clavier

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.

Pour réagir aux touches pressées, vous pouvez utiliser des gestionnaires d'événements clavier, mais il serait fastidieux de le faire pour chaque bouton ou chaque item de menu.

Création d'un raccourci clavier

XUL fournit des méthodes par lesquelles vous pouvez définir des raccourcis clavier. Nous avons déjà vu dans la section sur les menus que nous pouvions définir un attribut appelé accesskey qui spécifie la touche à presser par l'utilisateur pour activer le menu ou l'item de menu. Dans l'exemple ci-dessous, le menu Fichier peut être sélectionné en pressant Alt et F (ou une autre combinaison de touches spécifique à une plate-forme). Une fois le menu Fichier ouvert, l'item de menu Fermer peut être sélectionné en pressant F.

Exemple 6.3.1 : Source Voir

<menubar id="sample-menubar">
  <menu id="file-menu" label="Fichier" accesskey="f">
    <menupopup id="file-popup">
      <menuitem id="close-command" label="Fermer" accesskey="f"/>
    </menupopup>
  </menu>
</menubar>

Vous pouvez aussi utiliser l'attribut accesskey sur les boutons. Dans ce cas, quand la touche est pressée, le bouton est sélectionné.

Cependant, vous pourriez vouloir mettre en place des raccourcis clavier plus généraux, comme par exemple, la combinaison Ctrl+C pour copier du texte dans le presse-papiers. Bien que de tels raccourcis puissent ne pas être toujours valides, ils fonctionneront habituellement dès qu'une fenêtre est ouverte. Normalement, un raccourci sera autorisé à n'importe quel moment et vous pourrez vérifier via un script s'il doit faire quelque chose. Par exemple, copier du texte dans le presse-papiers ne devrait fonctionner seulement quand du texte est sélectionné.

Élément key

XUL fournit un élément, key, qui vous permet de définir un raccourci clavier pour une fenêtre. Il comprend des attributs pour définir la touche qui doit être pressée et quels modificateurs de touches (tels que shift pour Maj ou control pour Ctrl) doivent l'accompagner. Un exemple :

<keyset>
  <key id="sample-key" modifiers="shift" key="R"/>
</keyset>

Cet exemple définit un raccourci clavier qui s'active lorsque l'utilisateur presse les touches Maj et R. L'attribut key (notez qu'il a le même nom que l'élément lui-même) est utilisé pour indiquer quelle touche doit être pressée, dans ce cas R. Vous pouvez ajouter n'importe quels caractères à cet attribut selon les combinaisons de touches devant être pressées. Les modificateurs de touches devant être pressés sont indiqués par l'attribut modifiers. Il s'agit d'une liste de modificateurs séparée par des espaces, et ils sont décrits ci-dessous :

alt

L'utilisateur doit presser la touche Alt. Sous Macintosh, il s'agit de la touche Option.

control

L'utilisateur doit presser la touche Ctrl

meta

L'utilisateur doit presser la touche Meta. Il s'agit de la touche Command sous Macintosh.

shift

L'utilisateur doit presser la touche Shift (Maj)

accel

L'utilisateur doit presser la touche spéciale d'accélérateur. L'utilisateur doit presser la touche de raccourci spécifique à sa plate-forme. Il s'agit de la valeur que vous utiliserez habituellement.

Votre clavier n'a pas forcément toutes ces touches, dans ce cas, elles seront actives par d'autres touches de modification que vous possédez.

L'élément key doit être placé à l'intérieur d'un élément keyset. Cet élément est destiné à contenir un ensemble d'éléments key servant à grouper toutes les définitions de raccourcis dans un seul emplacement du fichier. Tout élément key à l'extérieur d'un élément keyset ne sera pas pris en compte.

Généralement, chaque plate-forme utilise une touche différente pour les raccourcis clavier. Par exemple, Windows utilise la touche Ctrl tandis que Macintosh utilise la touche Command. Il serait peu commode de définir un élément key propre à chaque plate-forme. Heureusement, il y a une solution, le modificateur de touches accel se réfère à la touche de raccourci spécifique à la plate-forme. Il fonctionne exactement comme les autres modificateurs de touches excepté qu'il change selon la plate-forme.

Voici quelques exemples supplémentaires :

<keyset>
  <key id="copy-key" modifiers="control" key="C"/>
  <key id="explore-key" modifiers="control alt" key="E"/>
  <key id="paste-key" modifiers="accel" key="V"/>
</keyset>

Attribut keycode

L'attribut key est utilisé pour spécifier quelles touches doivent être pressées. Toutefois, il y aura aussi des cas où vous voudrez spécifier des touches qui ne peuvent être décrites par un simple caractère (telle que la touche Enter ou les touches de fonctions). L'attribut key peut seulement être utilisé pour des caractères imprimables. Un autre attribut, keycode peut être utilisé pour les caractères non imprimables.

La valeur de l'attribut keycode doit être un code spécial qui représente la touche souhaitée. Une liste de touches est disponible ci-dessous. Toutes les touches ne sont pas disponibles sur toutes les plate-formes.

Par exemple, pour créer un raccourci qui est activé quand l'utilisateur presse les touches Alt et F5, faites ainsi :

<keyset>
  <key id="test-key" modifiers="alt" keycode="VK_F5"/>
</keyset>

L'exemple ci-dessous montre quelques raccourcis clavier supplémentaires :

<keyset>
  <key id="copy-key" modifiers="accel" key="C"/>
  <key id="find-key" keycode="VK_F3"/>
  <key id="switch-key" modifiers="control alt" key="1"/>
</keyset>

Le premier raccourci est déclenché lorsque l'utilisateur presse la touche de raccourci spécifique à sa plate-forme et C. Le deuxième est invoqué quand l'utilisateur presse F3. Le troisième se déclenche sur une pression des touches Ctrl, Alt et 1. Si vous voulez distinguer les touches de la partie centrale du clavier et les touches du pavé numérique, utilisez les touches VK_NUMPAD (telles que VK_NUMPAD1).

Consultez la page anglaise Mozilla Keyboard Planning FAQ and Cross Reference pour de plus amples informations sur les raccourcis clavier dans les applications.

Utilisation des raccourcis clavier

Maintenant que nous savons comment définir les raccourcis clavier, nous allons découvrir comment les utiliser. Il y a deux manières. La première est la plus simple et requiert seulement que vous utilisiez le gestionnaire d'événements clavier sur l'élément key. Quand l'utilisateur presse la (ou les) touche(s), le script est invoqué. Voici un exemple :

<keyset>
  <key id="copy-key" modifiers="accel" key="C" oncommand="DoCopy();"/>
</keyset>

La fonction DoCopy sera appelée quand l'utilisateur pressera les touches spécifiées par l'élément key qui sont, dans cet exemple, les touches pour copier vers le presse-papiers (telles que Ctrl+C). Ceci fonctionnera tant que la fenêtre sera ouverte. La fonction DoCopy devrait vérifier si du texte est sélectionné et le copier dans le presse-papiers si tel est le cas. Notez que les champs de saisie intègrent déjà des raccourcis pour utiliser le presse-papiers, de sorte que vous n'avez pas besoin de les implémenter vous-même.

Assignation d'un raccourci clavier à un menu

Si vous assignez un raccourci clavier à une commande qui existe déjà dans un menu, vous pouvez associer directement l'élément key avec la commande du menu. Pour cela, ajoutez un attribut key à l'élément menuitem. Donnez lui comme valeur l'id du raccourci que vous voulez lui associer. L'exemple ci-dessous explique cette méthode.

Exemple 6.3.2 : Source Voir

<keyset>
  <key id="paste-key" modifiers="accel" key="V"
          oncommand="alert('invoque Coller')"/>
</keyset>
<menubar id="sample-menubar">
  <menu id="edit-menu" label="Editer" accesskey="e">
    <menupopup id="edit-popup">
      <menuitem id="paste-command" accesskey="c" key="paste-key" label="Coller"
                   oncommand="alert('invoque Coller')"/>
    </menupopup>
  </menu>
</menubar>

L'attribut key de l'item du menu, qui est ici paste-key, est égal à l'id du raccourci défini. Vous pouvez utilisez cette méthode pour définir des raccourcis supplémentaires à plusieurs items de menu.

Vous noterez également dans cette image que du texte a été placé à côté de la commande Coller du menu pour indiquer le raccourci Ctrl+V pouvant être pressé pour invoquer la commande du menu. Cette indication est ajoutée automatiquement pour vous sur la base des touches de modification de l'élément key. Les raccourcis associés aux menus fonctionneront même si le menu n'est pas ouvert.

Une fonctionnalité supplémentaire des définitions de raccourcis est que vous pouvez les désactivez facilement. Il vous suffit d'ajouter un attribut disabled à l'élément key et lui affecter la valeur true. Cet attribut désactive le raccourci clavier de façon à ce qu'il ne puisse pas être invoqué. Il est facile de modifier l'attribut disabled par le biais d'un script.

<keyset>
  <key id="cut_cmd" modifiers="accel" key="X"/>
  <key id="copy_cmd" modifiers="accel" key="C"/>
  <key id="paste_cmd" modifiers="accel" key="V"/>
  <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/>
</keyset>

<vbox flex="1">
 <toolbox>
  <menubar id="findfiles-menubar">
   <menu id="file-menu" label="Fichier" accesskey="f">
     <menupopup id="file-popup">
       <menuitem label="Ouvrir une recherche..." accesskey="o"/>
       <menuitem label="Sauver une recherche..." accesskey="s"/>
       <menuseparator/>
       <menuitem label="Fermer" accesskey="c" key="close_cmd"
         oncommand="window.close();"/>
     </menupopup>
   </menu>
   <menu id="edit-menu" label="Editer" accesskey="e">
     <menupopup id="edit-popup">
       <menuitem label="Couper" accesskey="c" key="cut_cmd"/>
       <menuitem label="Copier" accesskey="p" key="copy_cmd"/>
       <menuitem label="Coller" accesskey="l" key="paste_cmd" disabled="true"/>
     </menupopup>
   </menu>

Événements Clavier

Il y a trois types d'événements clavier qui peuvent être utilisés si les dispositifs principaux décrits ci-dessus ne sont pas appropriés.

keypress

Appelé quand une touche est pressée puis relachée avec l'élement qui a le focus (élément actif). Vous pouvez l'utiliser pour controller les caractères saisis dans un champ.

keydown

Appelé quand une touche est pressée avec l'élément qui a le focus (élément actif). Remarquez que l'évènement sera appelé aussitôt la touche enfoncée, même si elle n'a pas été encore relachée.

keyup

Appelé quand une touche est relachée avec l'élément qui a le focus (élément actif).

Les évènements clavier sont envoyés seulement à l'élément qui a le focus. Typiquement, ils incluent les champs de saisie, les boutons, les cases à cocher, et d'autres encore. Si aucun des éléments n'est actif, l'événement sera dirigé vers le document XUL lui-même. Dans ce cas, vous pouvez associer un scrutateur d'événements à la balise window. Cependant, si vous voulez réagir aux événements de manière globale, vous devriez utiliser un raccourci clavier comme décrit plus haut.

L'objet event a deux propriétés qui contiennent la touche pressée. La propriété keyCode contient le code de la touche qui peut être comparé à une des constantes de la table des codes de touche vue plus tôt dans cette section. La propriété charCode est utilisée pour les caractères imprimables et contient le caractère de la touche pressée.

Dans la prochaine section, nous allons découvrir comment gérer le focus et la sélection.