CODEWITHSUNDEEP
javascriptcombinationsctrl
Paul Johnston
Paul Johnston

Reputation: 1333

Capturing ctrl+z key combination in javascript

I am trying to capture ctrl+z key combination in javascript with this 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>

Commented line "test1" generates the alert if I hold down the ctrl key and press any other key.

Commented line "test2" generates the alert if I press the z key.

Put them together as per the line after "test 1 & 2", and holding down the ctrl key then pressing the z key does not generate the alert as expected.

What is wrong with the code?

Upvotes: 133

Views: 163039

Answers (10)

zerkms
zerkms

Reputation: 255015

  1. Use onkeydown (or onkeyup), not onkeypress
  2. Use keyCode 90, not 122
function keyPressHandler(e) {
      var evtobj = window.event ? window.event : e;

      if (evtobj.ctrlKey && evtobj.keyCode == 90) {
          alert('Ctrl+z');
      }
}

window.addEventListener('keydown', keyPressHandler);

Online demo: http://jsfiddle.net/29sVC/

To clarify, keycodes are not the same as character codes.

Character codes are for text (they differ depending on the encoding, but in a lot of cases 0-127 remain ASCII codes). Key codes map to keys on a keyboard. For example, in unicode character 0x22909 means 好. There aren't many keyboards (if any) who actually have a key for this.

The OS takes care of transforming keystrokes to character codes using the input methods that the user configured. The results are sent to the keypress event. (Whereas keydown and keyup respond to the user pressing buttons, not typing text.)

Upvotes: 131

user1561106
user1561106

Reputation: 11

document.addEventListener('keydown', function(event) {
if ((event.ctrlKey || event.metaKey) &&event.shiftKey && event.key === 'z') {
  console.log('Redo!');
}else if ((event.ctrlKey || event.metaKey) && event.key === 'z') {
  console.log('Undo!');
}else if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
  console.log('Copy!');
}else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
  console.log('Paste!');
}else if ((event.ctrlKey || event.metaKey) && event.key === 'x') {
  console.log('Cropp!');
}

});

Upvotes: 0

Bertwin Romero
Bertwin Romero

Reputation: 79

enter image description here

You can actually see it all in the KeyboardEvent when you use keydown event

Upvotes: -1

Karthikeyan Ganesan
Karthikeyan Ganesan

Reputation: 2035

Use this code for CTRL+Z. keycode for Z in keydown is 90 and the CTRL+Z is ctrlKey. check this keycode in your console area

 $(document).on("keydown", function(e) {
       console.log(e.keyCode, e.ctrlKey);
       /*ctrl+z*/
       if (e.keyCode === 90 && e.ctrlKey) { // this is confirmed with MacBook pro Monterey on 1, Aug 2022
       {
          //your code here
       }
    });

Upvotes: -3

Aymen Fezai
Aymen Fezai

Reputation: 93

The KeyboardEvent.keyCode is deprecated (link) think about using KeyboardEvent.key instead (link).

So, the solution would be something like this.

if (e.key === "z" && e.ctrlKey) {
   alert('ctrl+z');
}

Upvotes: 0

newguy12121
newguy12121

Reputation: 51

document.onkeydown = function (e) {
    var special = e.ctrlKey || e.shiftKey;
    var key = e.charCode || e.keyCode;
  console.log(key.length);
  if (special && key == 38 || special && key == 40 ) { 
    // enter key do nothing
    e.preventDefault();
  }        
}

here is a way to block two keys, either shift+ or Ctrl+ key combinations.

&& helps with the key combinations, without the combinations, it blocks all ctrl or shift keys.

Upvotes: 4

lazd
lazd

Reputation: 4687

For future folks who stumble upon this question, here’s a better method to get the job done:

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

Using event.key greatly simplifies the code, removing hardcoded constants. It has support for IE 9+.

Additionally, using document.addEventListener means you won’t clobber other listeners to the same event.

Finally, there is no reason to use window.event. It’s actively discouraged and can result in fragile code.

Upvotes: 128

chandramouli.jamadagni
chandramouli.jamadagni

Reputation: 117

Ctrl+t is also possible...just use the keycode as 84 like 

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

Upvotes: 10

JDandChips
JDandChips

Reputation: 10110

90 is the Z key and this will do the necessary capture...

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

Depending on your requirements you may wish to add a e.preventDefault(); within your if statement to exclusively perform your custom functionality.

Upvotes: 3

Mehtab
Mehtab

Reputation: 473

$(document).keydown(function(e){
  if( e.which === 89 && e.ctrlKey ){
     alert('control + y'); 
  }
  else if( e.which === 90 && e.ctrlKey ){
     alert('control + z'); 
  }          
});

Demo

Upvotes: 6

Related Questions