web-dev-qa-db-fra.com

Capture de la combinaison de touches ctrl + z en javascript

J'essaye de capturer ctrl+z combinaison de touches en javascript avec ce code:

<html>
<head>
    <title>Untitled Document</title>
</head>
<body>

    <script type='text/javascript'>
        function KeyPress(e) {
            var evtobj = window.event? event : e


            //test1 if (evtobj.ctrlKey) alert("Ctrl");
            //test2 if (evtobj.keyCode == 122) alert("z");
            //test 1 & 2
            if (evtobj.keyCode == 122 && evtobj.ctrlKey) alert("Ctrl+z");
        }

        document.onkeypress = KeyPress;
    </script>

</body>
</html>

La ligne commentée "test1" génère l'alerte si je tiens le bouton enfoncé ctrl touche et appuyez sur n’importe quelle autre touche.

La ligne commentée "test2" génère l'alerte si j'appuie sur le z clé.

Assemblez-les selon la ligne après "test 1 & 2", et maintenez la ctrl appuyez ensuite sur la touche z key ne génère pas l'alerte comme prévu.

Quel est le problème avec le code?

javascriptcombinationsctrl
65
Paul Johnston
  1. Utilisez onkeydown (ou onkeyup), pas onkeypress
  2. Utilisez keyCode 90, pas 122

Démo en ligne: http://jsfiddle.net/29sVC/

Pour clarifier, les codes de touche ne sont pas identiques aux codes de caractères.

Les codes de caractères sont pour le texte (ils diffèrent en fonction du codage, mais dans de nombreux cas, il reste 0-127 ASCII). Les codes de clé correspondent aux touches d'un clavier. Par exemple, en unicode Le caractère 0x22909 signifie ". Il n'y a pas beaucoup de claviers (le cas échéant) qui ont une clé pour cela.

Le système d'exploitation se charge de transformer les séquences de touches en codes de caractères à l'aide des méthodes de saisie que l'utilisateur a configurées. Les résultats sont envoyés à l'événement de frappe. (Attendu que keydown et keyup répondent à l'utilisateur en appuyant sur les boutons, sans saisir de texte.)

83
zerkms

Ctrl+t est également possible ... il suffit d'utiliser le code comme 84

if (evtobj.ctrlKey && evtobj.keyCode == 84) 
 alert("Ctrl+t");
10
chandramouli.jamadagni
$(document).keydown(function(e){
  if( e.which === 89 && e.ctrlKey ){
     alert('control + y'); 
  }
  else if( e.which === 90 && e.ctrlKey ){
     alert('control + z'); 
  }          
});

démo

7
user3542190

90 est le Z clé et cela fera la capture nécessaire ...

function KeyPress(e){
     // Ensure event is not null
     e = e || window.event;

     if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) {
         // Ctrl + Z
         // Do Something
     }
}

Selon vos besoins, vous voudrez peut-être ajouter une e.preventDefault(); dans votre instruction if pour exécuter exclusivement vos fonctionnalités personnalisées.

4
JDandChips

Pour les futurs gens qui tombent sur cette question, voici une meilleure méthode pour faire le travail:

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'z') {
    alert('Undo!');
  }
});

En utilisant event.key simplifie grandement le code en supprimant les constantes codées en dur. Il supporte IE 9+, voir la documentation ici: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

De plus, en utilisant document.addEventListener _ signifie que vous n'encombrerez pas les autres auditeurs du même événement. Voir https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Enfin, il n'y a aucune raison d'utiliser window.event, il est activement découragé et peut rendre le code fragile. Voir https://developer.mozilla.org/en-US/docs/Web/API/Window/event

3
lazd