Raccourcis claviers en Javascript

Toute application digne de ce nom possède sa panoplie de raccourcis clavier: Ces combinaisons de touches qui pemettent d’effectuer une action sans passer par la barre de menu. Etant donné le coté pratique des raccourcis claviers, pourquoi ne pas les implémenter aussi dans votre appli web? Javascript permet de créer des raccourcis claviers très simplement, avec ou sans JQuery.

Un peu de théorie

L’emploi de raccourcis clavier en javascript – et sur le web en général– reste relativement marginal. Selon moi, c’est bien dommage car les raccourcis clavier sur une appli web peuvent être extrêmement pratiques à conditions d’être à la base bien pensés par les développeurs.
Le facteur le plus important à prendre en compte est bien entendu de ne pas créer de raccourcis claviers qui rentreraient en conflit avec ceux du navigateur de l’internaute. Par exemple, sous Firefox, le raccourci Ctrl+U permet d’afficher le code source de la page web. Que se passera t’il si vous définissez la même combinaison de touches comme raccourci dans votre application? L’une des deux actions sera effectuée, mais pas les deux, et probablement pas celle qu’attendait le visiteur… D’une manière générale – Et bien que les exemples ci-dessous ne se tiennent pas à cette règle – je déconseille d’utiliser la touche Ctrl pour créer des raccourcis claviers en Javascript: Cette touche est utilisée par pratiquement tous les browsers pour leur raccourcis claviers internes. Préférez-y une touche comme Tab, par exemple.

Parmi les gestionnaires d’événements proposés par Javascript, nous nous intéresseront ici à onkeyup, qui permet de déclencher une fonction dès que l’utilisateur presse une touche. Il suffira alors de comparer la valeur retournée au code clavier correspondant à la touche qui nous intéresse.

Les codes claviers quand à eux, sont des codes numériques à deux ou trois chiffres. A chaque touche du clavier correspond un code clavier, par exemple la touche Ctrl qui à pour code clavier 17.
Pour une liste complète des correspondances touches/codes clavier, rendez-vous à la fin de cet article.

Exemples

Dans ces exemples, nous allons simplement vérifier les touches pressées par l’utilisateur. Si il s’agit de la combinaison Ctrl+S, alors une fonction sera déclenchée.
Le premier exemple est en Javascript “traditionnel” tandis que le second utilise la bibliothèque JQuery.

var isCtrl = false;
document.onkeyup=function(e) {
    if(e.which == 17) isCtrl=false;
}document.onkeydown=function(e){
    if(e.which == 17) isCtrl=true;
    if(e.which == 83 && isCtrl == true) {
         // Votre fonction à déclencher au Ctrl+S
         return false;
    }
}

Exemple avec JQuery:

var isCtrl = false;$(document).keyup(function (e) {
if(e.which == 17) isCtrl=false;
}).keydown(function (e) {
    if(e.which == 17) isCtrl=true;
    if(e.which == 83 && isCtrl == true) {
        // Votre fonction à déclencher au Ctrl+S
 	return false;
 }
});

Dans ces deux exemples, nous vérifions tout d’abord que la touche Ctrl est bien pressée par l’utilisateur. Si c’est le cas, alors nous changeons la valeur de la variable isCtrl à true. Si les touches sont relâchées, isCtrl reprendra sa valeur initiale, c’est à dire false.
Ensuite, il convient de vérifier que la seconde touche pressée par l’utilisateur corresponds bien à la touche S. De plus, comme il doit s’agir d’une combinaison de touches (Dans cet exemple, Ctrl+S) il convient de vérifier que la variable isCtrl à bien true comme valeur.
Si ces deux conditions sont remplies, alors nous pouvons déclencher la fonction désirée pour la combinaison de touche Ctrl+S.

Equivalences touches/codes clavier

A partir de là, on pourrait facilement implémenter une fonction qui nous permettrais de savoir sur quelle touche le visiteur à appuyé en utilisant un tableau Javascript. Pour ma part, je m’arrêterais ici. Bon coding