Lorsqu’on interagit avec un formulaire au clavier, la touche
entrée sert à valider le formulaire entier (sauf dans un
<textarea>). Il a donc fallu assigner une autre touche pour « activer » les élements (bouton radio, case à cocher, etc.), il s’agit de la touche
espace. Pour passer d’un élément à l’autre, on utilise
tab (ou
maj+tab), et pour changer la valeur d’une liste de boutons radio ou d’un
<select>, on utilise les flèches. On peut également déplier/replier un
<select> avec
espace et
entrée respectivement. Tout ça nécessite un peu d’entraînement au début, mais c’est le comportement habituel des interfaces accessibles. Mettre en œuvre un autre mécanisme d’interaction, c’est faire une entorse au
principe de moindre surprise.
Les évènements clavier « purs » sont
keyup,
keydown et
keypress.
keyup est émis pour toute action au clavier, ce qui inclut les touches spéciales comme
ctrl. Dans le cas des combinaisons de touches telles que
ctrl+V, plusieurs
keyup sont émis (un pour
ctrl et un pour
V). L’action de coller elle-même émet en plus un évènement
paste ; il remplace avantageusement une fonction
keyup inutilement compliquée.
keydown est l’équivalent de
keyup, sauf qu’il est émis en continu tant que la touche est enfoncée.
keypress est différent car il n’est émis que pour les touches correspondant à du texte. Le cas échéant, il est émis en même temps que
keyup. Pour certaines touches ayant une « action » sur le texte (
effacer,
tab,
entrée, etc.), les différents navigateurs ne sont pas cohérents entre eux : des fois
keypress est émis, des fois pas. Si on veut gérer ces touches en particulier, il vaut mieux utiliser
keyup et examiner le
keyCode de l’évènement.
click peut être également considéré comme un évènement clavier car il est émis lorsqu’on active un élément, que ce soit avec
espace ou
entrée. Si la valeur d’un élément a changé, un
change sera émis en même temps que
blur lorsque tu passeras à l’élément suivant avec la touche
tab.
Partager