119 votes

Capture de la combinaison de touches ctrl+z en javascript

J'essaie de capturer ctrl + z 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 maintiens le bouton de la souris enfoncé. ctrl et appuyez sur n'importe quelle autre touche.

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

Mettez-les ensemble comme à la ligne après "test 1 & 2", et en maintenant la touche ctrl puis en appuyant sur la touche z ne génère pas l'alerte comme prévu.

Quel est le problème avec le code ?

121voto

zerkms Points 105994
  1. Utilisez onkeydown (ou onkeyup ), pas onkeypress
  2. Utilisez keyCode 90, pas 122

    function KeyPress(e) { var evtobj = window.event? event : e if (evtobj.keyCode == 90 && evtobj.ctrlKey) alert("Ctrl+z"); }

    document.onkeydown = KeyPress;

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

Pour clarifier, Les keycodes ne sont pas les mêmes que les codes de caractères.

Les codes de caractères sont pour le texte (ils diffèrent selon l'encodage, mais dans beaucoup de cas, 0-127 restent des codes ASCII). Les codes de touches correspondent aux touches d'un clavier. Par exemple, en unicode, le caractère 0x22909 signifie 好. Il n'y a pas beaucoup de claviers (s'il y en a) qui ont réellement une touche pour cela.

Le système d'exploitation se charge de transformer les frappes en codes de caractères en utilisant les méthodes de saisie configurées par l'utilisateur. Les résultats sont envoyés à l'événement keypress. (Alors que keydown et keyup répondent à l'utilisateur qui appuie sur des boutons, et non qui tape du texte).

105voto

lazd Points 591

Pour les futures personnes qui tomberont 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!');
  }
});

Utilisation de event.key simplifie grandement le code, en supprimant les constantes codées en dur. Il est compatible avec IE 9+.

En outre, l'utilisation de document.addEventListener signifie que vous n'engloutirez pas les autres auditeurs du même événement.

Enfin, il n'y a aucune raison d'utiliser window.event . C'est activement déconseillé et cela peut aboutir à un code fragile.

10voto

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

if (evtobj.ctrlKey && evtobj.keyCode == 84) 
 alert("Ctrl+t");

6voto

user3542190 Points 153
$(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

3voto

JDandChips Points 557

90 est le Z 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
     }
}

En fonction de vos besoins, vous souhaiterez peut-être ajouter une e.preventDefault(); dans votre instruction if pour exécuter exclusivement votre fonctionnalité personnalisée.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X