danielhagnoul

Le 2014-01-22, j'ai écrit un Q/R jQuery : "Comment puis-je intercepter les frappes multitouches ?"

J'utilisais alors event.which, mais aujourd’hui c'est obsolète, et l'on doit utiliser event.key et ses valeurs prédéfinies.

Envoyé par Watilin; https://www.developpez.net/forums/d1708543/webmasters-developpement-web/javascript-ajax-typescript-dart/javascript/bonnes-manieres-detecter-touches-clavier/#post9356084

C’est une interprétation personnelle, mais peut-être que which a été déprécié parce qu’il ne représentait pas clairement l’intention du développeur, étant donné que cette propriété représente tantôt keyCode tantôt charCode selon le type d’évènement. Comme les deux sont des valeurs numériques, il y avait ambiguïté. Par exemple pour un « a » minuscule, le keyCode est 65 et le charCode est 97.

En revanche, je ne comprends pas l’intérêt d’avoir déprécié keyCode et charCode.

key fait un bel effort pour tenter de proposer une solution à cette ambiguïté, mais à mon avis il y a encore du boulot. Par exemple, pour avoir accès à la valeur d’une touche morte, il faut examiner keyCode qui est pourtant censé être déprécié… Ou bien utiliser un obscur évènement compositionupdate qui m’a l’air inutilement compliqué. Tiens, je me demande si Peter-Paul Koch a dit quelque chose à propos de ça…

Envoyé par Watilin; https://www.developpez.net/forums/d1708543/webmasters-developpement-web/javascript-ajax-typescript-dart/javascript/bonnes-manieres-detecter-touches-clavier/#post9357786

Une touche morte, c’est une touche qui se combine avec une autre après coup, par exemple la touche accent circonflexe. Quand tu appuies dessus dans un premier temps, ça ne fait rien, mais si ensuite par exemple j’appuie sur « a », ça va produire un « â ». Même si seule elle ne produit rien, ça reste une touche avec un keyCode et on devrait avoir accès à ce code. Si le nouveau standard ne permet pas d’avoir ce code aussi simplement qu’avec l’ancien, alors c’est une régression.

Envoyé par Watilin; https://www.developpez.net/forums/d1708543/webmasters-developpement-web/javascript-ajax-typescript-dart/javascript/bonnes-manieres-detecter-touches-clavier/#post9357861

La console affiche Dead: true mais on ne sait pas de quelle touche morte il s’agit ! Sur une disposition azerty sous Windows il y a au moins trois touches mortes (le tilde AltGr+2, l'accent grave AltGr+7, etc.), encore plus sur les variantes d’azerty couramment disponibles sous Linux, et encore plus sur une disposition bépo. Savoir de laquelle il s’agit est important. Le MDN explique qu’il faut utiliser un évènement compositionupdate, mais si je suis simplement intéressé par le code matériel de la touche, ça ne me paraît pas pertinent d’être obligé d’avoir recours à une API qui concerne la composition de caractères.

Interception des frappes simples ou multiples (touches *, Ctrl+*, Shift+* et Ctrl+Shift+*), exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<input id="tapezIci" type="text" placeholder="tapez ici...">

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
let
	boolControl = false,
	boolShift = false;
 
const
	tapezIci = document.querySelector( "#tapezIci" ),
	keyboard = ev => {
		ev.preventDefault();
		ev.stopPropagation();
 
		// debug
		//console.log( ev.type, ev.key, boolControl, boolShift );
 
		// utilisation
		switch( ev.key ){
			case "F12" :
				console.log( "console, touche ", ev.key );
				break;
			case "OS" :
				console.log( "touches META+d = ", ev.key );
				break;
			case "â" :
				console.log( "dead ^ + a = ", ev.key );
				break;
			case "z" :
				console.log( "touche ", ev.key );
 
				if ( boolControl ){
					console.log( "ctrl + z" );
				}
				break;
			case "Z" :
				console.log( "touche ", ev.key );
 
				if ( boolControl && boolShift ){
					console.log( "ctrl + Shift + z" );
				}
				break;
			default :
				console.log( "touche ", ev.key );
				break;
		}
 
		// gestion des booléens
		switch ( ev.key ){
			case "Control" :
				boolControl = true;
				break;
			case "Shift" :
				boolShift = true;
				break;
			default :
				boolControl = false;
				boolShift = false;
				break;
		}
}
 
tapezIci.addEventListener( "keydown", ev => { console.clear(); keyboard( ev ) }, false );