Raccourcis claviers en Javascript

Publié le 25 février 2008 par Jbjweb

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

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

Touche Code clavier

Backspace 8

Tab 9

Entrée 13

Shift 16

Ctrl 17

Alt 18

Pause 19

Capslock 20

Esc 27

Page up 33

Touche Code clavier

Backspace 8

Tab 9

Entrée 13

Shift 16

Ctrl 17

Alt 18

Pause 19

Capslock 20

Esc 27

Page up 33

Page down 34

End 35

Home 36

Flèche gauche 37

Flèche haut 38

Flèche droit 39

Flèche bas 40

Insert 45

Delete 46

0 48

1 49

2 50

3 51

4 52

5 53

6 54

7 55

8 56

9 57

a 65

b 66

c 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

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

Touche Code clavier

Backspace 8

Tab 9

Entrée 13

Shift 16

Ctrl 17

Alt 18

Pause 19

Capslock 20

Esc 27

Page up 33

Touche Code clavier

Backspace 8

Tab 9

Entrée 13

Shift 16

Ctrl 17

Alt 18

Pause 19

Capslock 20

Esc 27

Page up 33

Page down 34

End 35

Home 36

Flèche gauche 37

Flèche haut 38

Flèche droit 39

Flèche bas 40

Insert 45

Delete 46

0 48

1 49

2 50

3 51

4 52

5 53

6 54

7 55

8 56

9 57

a 65

b 66

c 67

d 68

e 69

f 70

g 71

h 72

i 73

j 74

k 75

l 76

m 77

n 78

o 79

p 80

q 81

r 82

s 83

t 84

u 85

v 86

w 87

x 88

y 89

z 90

0 (pavé numérique) 96

1 (pavé numérique) 97

2 (pavé numérique) 98

3 (pavé numérique) 99

4 (pavé numérique) 100

5 (pavé numérique) 101

6 (pavé numérique) 102

7 (pavé numérique) 103

8 (pavé numérique) 104

9 (pavé numérique) 105

Signe * 106

Signe + 107

Signe - 109

Point décimal 110

Signe / 111

F1 112

F2 113

F3 114

F4 115

F5 116

F6 117

F7 118

F8 119

F9 120

F10 121

F11 122

F12 123

Signe = 187

Virgule 188

Slash / 191

Backslash \ 220

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