1. #1
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 921
    Points : 1 011
    Points
    1 011

    Par défaut 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.

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 735
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 735
    Points : 21 094
    Points
    21 094
    Billets dans le blog
    39

    Par défaut



    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.

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 921
    Points : 1 011
    Points
    1 011

    Par défaut

    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...

  4. #4
    Expert confirmé Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 113
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 113
    Points : 4 104
    Points
    4 104

    Par défaut

    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…
    La FAQ JavaScript – Les cours JavaScript – Mon terrain de jeu préféré ? Greasemonkey.
    La touche F12 : l’outil indispensable à tout développeur JavaScript !

  5. #5
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 921
    Points : 1 011
    Points
    1 011

    Par défaut

    Merci Watilin,

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

    Merci.

  6. #6
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 921
    Points : 1 011
    Points
    1 011

    Par défaut

    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.

  7. #7
    Expert confirmé Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 113
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 113
    Points : 4 104
    Points
    4 104

    Par défaut

    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.
    La FAQ JavaScript – Les cours JavaScript – Mon terrain de jeu préféré ? Greasemonkey.
    La touche F12 : l’outil indispensable à tout développeur JavaScript !

  8. #8
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 735
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 735
    Points : 21 094
    Points
    21 094
    Billets dans le blog
    39

    Par défaut

    Chez moi tout semble fonctionner, inclus le META+d et le â

    Pour le â, la console Firefox affiche :
    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 :
    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 :
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    function keyboard(event) {
        var keyPressed = {};

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  9. #9
    Expert confirmé Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 113
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 113
    Points : 4 104
    Points
    4 104

    Par défaut

    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.
    La FAQ JavaScript – Les cours JavaScript – Mon terrain de jeu préféré ? Greasemonkey.
    La touche F12 : l’outil indispensable à tout développeur JavaScript !

  10. #10
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 735
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 735
    Points : 21 094
    Points
    21 094
    Billets dans le blog
    39

    Par défaut

    Mon code de test :

    Code HTML : 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
    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>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  11. #11
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 921
    Points : 1 011
    Points
    1 011

    Par défaut

    Citation Envoyé par Watilin Voir le message
    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 javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    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 Voir le message
    Mon code de test :
    Merci je vais regarder ça...

  12. #12
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 735
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 735
    Points : 21 094
    Points
    21 094
    Billets dans le blog
    39

    Par défaut

    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 HTML : 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
    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>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  13. #13
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 921
    Points : 1 011
    Points
    1 011

  14. #14
    Membre habitué
    Homme Profil pro
    Développeur de jeux vidéo
    Inscrit en
    mai 2014
    Messages
    191
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur de jeux vidéo
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : mai 2014
    Messages : 191
    Points : 133
    Points
    133

    Par défaut

    Citation Envoyé par danielhagnoul Voir le message
    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 HTML : 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
    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

  15. #15
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 735
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 735
    Points : 21 094
    Points
    21 094
    Billets dans le blog
    39

    Par défaut

    Citation Envoyé par Disixlis Voir le message
    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 ?

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  16. #16
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 921
    Points : 1 011
    Points
    1 011

    Par défaut

    Salut,
    Citation Envoyé par Disixlis Voir le message
    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...

Discussions similaires

  1. [WD19] La bonne manière de gérer les référentiels
    Par Micke7 dans le forum WinDev
    Réponses: 4
    Dernier message: 21/10/2014, 16h47
  2. Quelles sont vos bonnes résolutions de développeur pour 2010 ?
    Par Katleen Erna dans le forum Actualités
    Réponses: 48
    Dernier message: 11/01/2010, 18h02
  3. Réponses: 4
    Dernier message: 16/12/2009, 01h14
  4. Réponses: 4
    Dernier message: 01/10/2008, 08h59
  5. [SWING] Les bonnes manieres de coder les ihm ?
    Par 17mounir dans le forum Débuter
    Réponses: 4
    Dernier message: 21/07/2005, 15h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo