En Développement web, le langage Javascript permet à un navigateur, en lisant une page, de comprendre les interactions possibles à l’aide de la souris, mais également du clavier.

Les interactions du clavier

Pour un navigateur web, le clavier permet :

  • D’écrire du texte et nombres dans un formulaire
  • De naviguer avec les flèches
  • D’utiliser les raccourcis du navigateur (ex: F5 pour actualiser)

En javascript il est possible de surveiller la pression d’une touche, de réassigner l’interaction des touches claviers ou de simuler la pression d’une/plusieurs touches.

Surveiller la pression d’une touche


document.addEventListener('keydown', (event) => {
var name = event.key;
var code = event.code;
alert(`Le Nom de la touche appuyée est ${name}, son Numéro est: ${code}`);
if(${code} == '77'){alert(`Vous venez presser la touche M`);}
}, false);

Lorsqu’une touche sera appuyée, un encart affichera “Le Nom de la touche appuyée est …, son Numéro est: …”.
Si la touche M est appuyée, un second encart affichera “Vous venez presser la touche M”.

Je mettrai en fin d’article la liste des Noms des Touches clavier avec leur “Code équivalent” Javascript.

Simuler l’appui d’une touche en Javascript


var e = jQuery.Event("keydown");
e.which = 77; //On configure le code (ici 77) de la touche (M) à simuler
e.altKey = true;
$("input").trigger(e);

Utiliser plusieurs combinaisons de Touches

Pour utiliser plusieurs combinaisons de Touches, cela se complique car chaque Touche possède son comportement JS natif à désactiver avant de le remplacer par ce que l’on souhaite.

Le plugin JQuery Double-Keypress de 2018 permet ce tour de force :

https://www.jqueryscript.net/other/Double-Keypress-Plugin-jQuery.html

Interactions du clavier, Objectifs : Ergonomie et Sécurité

Ergonomie

En Ergonomie, modifier le comportement normal d’un site web est marginal en développement web.

Mais dans certains cas, comme un écran tactile, cela peut se révéler très pratique.

Sécurité

En sécurité, n’autoriser qu’un éventail strict d’interactions du clavier permet de protéger une page ou une application.

L’idée est de proposer au client un clavier virtuel n’autorisant que les touches nécessaires à la navigation.

Regardez l’interface d’un guichet de banque, le clavier physique et/ou virtuel ne propose que peu de touches, comparé au clavier PC traditionnel.

Noms des Touches et leur “Code équivalent” Javascript

Utiliser le Code des touches plutôt que leur Nom dans vos scripts permet d’éviter une erreur de frappe.

  • Alt : 18
  • Arrow Down : 40
  • Arrow Left : 37
  • Arrow Right : 39
  • Arrow Up : 38
  • Backspace : 8
  • Caps Lock : 20
  • Ctrl : 17
  • Delete : 46
  • End : 35
  • Enter : 13
  • Esc : 27
  • F1 : 112
  • F2 : 113
  • F3 : 114
  • F4 : 115
  • F5 : 116
  • F6 : 117
  • F7 : 118
  • F8 : 119
  • F9 : 120
  • F10 : 121
  • F11 : 122
  • F12 : 123
  • Page Down : 34
  • Page Up : 33
  • Pause : 19
  • Print Scrn : 44
  • Scroll Lock : 145
  • 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
  • W : 87
  • X : 88
  • Y : 89
  • Z : 90
  • (NumPad) 0 : 96
  • NumPad) 1 : 97
  • (NumPad) 2 : 98
  • NumPad) 3 : 99
  • (NumPad) 4 : 100
  • (NumPad) 5 : 101
  • (NumPad) 6 : 102
  • (NumPad) 7 : 103
  • (NumPad) 8 : 104
  • (NumPad) 9 : 105
  • 1 : 49
  • 2 : 50
  • 3 : 51
  • 4 : 52
  • 5 : 53
  • 6 : 54
  • 7 : 55
  • 8 : 56
  • 9 : 57
  • 0 : 48
  • ‘ : 222
  • – : 189
  • , : 188
  • . : 190
  • / : 191
  • ; : 186
  • [ : 219
  • \ : 220
  • ] : 221
  • ‘ : 192
  • = : 187
  • Home : 36
  • Insert : 45
  • Num Lock : 144
  • Scroll Lock : 145
  • Shift : 16
  • Spacebar : 32
  • Tab : 9
  • (NumPad) – : 109
  • (NumPad) * : 106
  • (NumPad) . : 110
  • (NumPad) / : 111
  • (NumPad) + : 107