Quelles sont les bonnes manières de détecter les touches du clavier ?

Version imprimable

08/06/2017, 18h26
Beginner.

Quelles sont les bonnes manières de détecter les touches du clavier ?

Salut,

C'est un sujet répandu mais j'ai vu plusieurs manières de procéder alors j'aurais voulu savoir lesquelles sont les bonnes ou quelles sont celles que vous utilisez...

---> Premier point : le code de la touche

Je vois plusieurs choses : event.keyCode, event.which, event.charCode, event.key...

J'ai vu que certains proposent d'utiliser les deux ou trois premiers comme ça : var code = event.which || event.keyCode || event.charCode.

Si j'ai bien compris les trois premiers sont "Deprecated"...

---> Deuxième point : l’éventement

- Vous préférerez utiliser onkeydown ou onkeypress ? Ca dépend peut-être du contexte ?

- Vrai ou faux : Si on utilise l'un il n'y a pas besoin d'utiliser l'autre ?

---> Troisième point : touches simultanées

Comment faites-vous pour détecter les touches simultanées ? Souvent c'est Ctrl | Alt | Shift + une autre touche...

Est-ce que vous utilisez : event.ctrlKey | event.altKey | event.shiftKey avec un ET logique du code des autres touches ?

Qu'en pensez-vous ?
Merci.
08/06/2017, 22h11
danielhagnoul

:salut:

La seule fois ou je me suis sérieusement penché sur le problème c'était le 2014-01-22 pour rédiger un Q/R jQuery : "Comment puis-je intercepter les frappes multitouches ?"

J'utilisais alors event.which, mais je constate comme vous que depuis 2014 les choses ont évolué :

Citation:

Envoyé par https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

C'était pourtant largement compatible avec les navigateurs, voir le bas de page de la citation.

Si j'ai bien vu et lu, on doit maintenant se dépatouiller avec event.key et ses valeurs prédéfinies. :calim2:
08/06/2017, 23h24
Beginner.

Salut et merci ! Je vais regarder ton lien sur les frappes multitouches (c'est le point trois).

Sinon oui j'ai cru comprendre aussi qu'il fallait désormais utiliser event.key...
09/06/2017, 14h11
Watilin

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 ambigüité. 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 ambigüité, 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… :roll:
09/06/2017, 19h56
Beginner.

Merci Watilin,

Que veux-tu dire par "...pour avoir accès à la valeur d’une touche morte" ? C'est quoi une touche morte ?

Merci.
09/06/2017, 21h18
Beginner.

Salut,

J'ai fait un truc basé sur le même principe que ce qu'a fait DanielHagnoul mais j'utilise key et au lieu de mettre "false" quand la touche est relâchée, je la supprime de l'objet : delete keyPressed[event.key] comme ça cela me permet par exemple d'avoir facilement la liste des touches enfoncées avec Object.keys(keyPressed) et leur nombre avec : Object.keys(keyPressed).length.

J'ai fait le test ici : http://jsbin.com/zuquvujuge/1/edit?js,console,output

Mais je ne sais pas si c'est une bonne solution, je me demande si il n'y a pas des failles...

Qu'en pensez-vous ?
Merci.
09/06/2017, 22h54
Watilin

Je ne sais pas… Je n’ai pas l’habitude d’utiliser delete, j’ai toujours l’impression qu’on peut faire autrement. Mais ça ne me semble pas une mauvaise façon de faire.

En revanche j’ai trouvé une faille : j’ai fait Meta+D pour afficher le bureau, et ton script n’a pas reçu le keyup. Ça peut se produire dans un tas de situations, par exemple Ctrl+Tab pour changer d’onglet. Une solution est de surveiller le focus sur l’objet window et de mettre à jour tes données quand un tel évènement est reçu.

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.
09/06/2017, 23h13
danielhagnoul
Chez moi tout semble fonctionner, inclus le META+d et le â

Pour le â, la console Firefox affiche :

Citation:

keydown Object { Dead: true } test21.html:65:5
keyup Object { } test21.html:65:5
keydown Object { â: true } test21.html:65:5
keyup Object { â: true }

Pour le META+d :

Citation:

keydown Object { OS: true }

@Watilin : on perd facilement le focus sur l'input et alors on pense que cela ne fonctionne pas. Cela m'est arrivé plusieurs fois.

EDIT 23:15

keyup {â: true} ! Il persiste même à la frappe suivante :

Citation:

keydown {Dead: true}
test21.html:65 keyup {}
test21.html:65 keydown {â: true}
test21.html:65 keyup {â: true}
test21.html:65 keydown {â: true, " ": true}
test21.html:65 keyup {â: true}

EDIT 23:21

C'est un simple problème de portée pour keyPressed, correction :
Code:

1 2 function keyboard(event) { var keyPressed = {};
09/06/2017, 23h30
Watilin

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.

Mon code de test :

Code:

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }           
                
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.3.3.js"></script>
  <script>
    'use strict';
                   
    document.addEventListener( "DOMContentLoaded", ev => {
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        const
                                tapezIci = document.querySelector( "#tapezIci" );
                        
                        let
                                boolControl = false,
                                boolShift = false;
 
                        function keyboard( event ) {
                                let
                                        keyPressed = {};
                                
                                if ( event.type === "keydown" ) {
                                        keyPressed[ event.key ] = true;
                                        
                                        // debug
                                        console.log( event.type, keyPressed, boolControl, boolShift );
                                        
                                        // utilisation
                                        if ( boolControl && keyPressed[ 'a' ] ){
                                                console.log( "ctrl + a" );
                                        }
                                        
                                        if ( boolControl && boolShift && keyPressed[ 'A' ] ){
                                                console.log( "ctrl + Shift + a" );
                                        }
                                        
                                        // gestion des booléens
                                        switch ( event.key ){
                                                case "Control" :
                                                        boolControl = true;
                                                        break;
                                                case "Shift" :
                                                        boolShift = true;
                                                        break;
                                                default :
                                                        boolControl = false;
                                                        boolShift = false;
                                                        break;
                                        }
                                        
                                } else if ( event.type === "keyup" ) {                                  
                                        delete keyPressed[ event.key ];
                                }
                        }
                        
                        tapezIci.addEventListener( "keydown", ev => { console.clear(); keyboard( ev ) }, false );
                        tapezIci.addEventListener( "keyup", ev => { keyboard( ev ) }, false );
                        
                        // fin code du test
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
		<input id="tapezIci" type="text" placeholder="tapez ici...">
 
	</main>
</body>
</html>

10/06/2017, 00h26
Beginner.
Citation:

Envoyé par Watilin

En revanche j’ai trouvé une faille : j’ai fait Meta+D pour afficher le bureau, et ton script n’a pas reçu le keyup. Ça peut se produire dans un tas de situations, par exemple Ctrl+Tab pour changer d’onglet. Une solution est de surveiller le focus sur l’objet window et de mettre à jour tes données quand un tel évènement est reçu.

Oui bien vu, j'avais repérè ce problème notamment quand on fait "ctrl + f", "ctrl + n", "f12"... Je l'avais d'ailleurs traité en ajoutant cette fonction :
Code:

1 2 3 4 function focusOut(event) { keyPressed = {}; txta1.value = "perte de focus, remise à zéro..."; }
Par contre le coup des touches mortes posent problème et ça je n'y avais pas pensé...

Citation:

Envoyé par danielhagnoul

Mon code de test :

Merci je vais regarder ça...

Mon code de test nettoyé des scories venant des essais (j'étais pressé hier soir, je devais partir, désolé) :

EDIT 11:01 version améliorée :

Code:

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }           
                
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.3.3.js"></script>
  <script>
    'use strict';
                   
    document.addEventListener( "DOMContentLoaded", ev => {
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        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 );
                        
                        // fin code du test
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
		<input id="tapezIci" type="text" placeholder="tapez ici...">
 
	</main>
</body>
</html>

10/06/2017, 21h18
Beginner.

Ok merci.

Test ici : http://jsbin.com/sejoponiho/edit?html,console,output

Citation:

Envoyé par danielhagnoul

Mon code de test nettoyé des scories venant des essais (j'étais pressé hier soir, je devais partir, désolé) :

EDIT 11:01 version améliorée :

Code:

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }           
                
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.3.3.js"></script>
  <script>
    'use strict';
                   
    document.addEventListener( "DOMContentLoaded", ev => {
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        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 );
                        
                        // fin code du test
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
		<input id="tapezIci" type="text" placeholder="tapez ici...">
 
	</main>
</body>
</html>

Dommage qu'il ne permet pas de tester tout les caractères

16/06/2017, 20h58
danielhagnoul

Citation:

Envoyé par Disixlis

Dommage qu'il ne permet pas de tester tout les caractères

Ce n'est qu'un exemple basique, mais je pense avoir testé de nombreuses touches. Quels caractères ou associations de caractères voulez-vous intercepter ?
17/06/2017, 08h01
Beginner.

Salut,

Citation:

Envoyé par Disixlis

Dommage qu'il ne permet pas de tester tout les caractères

Ben ce serait long de tester tous les caractères et encore beaucoup plus long de tester toutes les combinaisons de caractères... En fait le code de Daniel donne le principe après c'est à chaque utilisateur de mettre en pratique ce principe pour tester les touches qu'il l'intéressent...