Capturing ctrl+z key combination in javascript

Question

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?

score 125 · Accepted Answer · edited May 29 '22 at 13:55

125

Use onkeydown (or onkeyup), not onkeypress
Use keyCode 90, not 122

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

document.onkeydown = KeyPress;

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

edited May 29 '22 at 13:55

Avatar

14,622
9
119
198

answered Apr 15 '13 at 02:04

zerkms

249,484
69
436
539

1

Thanks, that works. Why doesn't onkeypress and keyCode 122 work? – Paul Johnston Apr 15 '13 at 02:59
How to preventDefault() instead of alert in your solution please? I m testing for Ctrl+ t. – Surendra Jnawali Apr 17 '13 at 06:09
@SJnawali: I'm not sure it's possible for `ctrl+t` – zerkms Apr 17 '13 at 06:25
4

_why does keyCode 122 doesn't work?_ well, `122` is for **F11** key :) – Baby Feb 20 '14 at 08:30
7

@PaulJohnston Because a **key** code isn't the same as a **character** code. 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.) – Aidiakapi May 14 '14 at 15:13
@PaulJohnston I believe you have to use `keydown` because all the other events are too late. By that I mean the browser intercepts the command and performs the native undo, whereas on keydown, the browser hasn't yet taken note of the event – Luke Madhanga Aug 11 '15 at 13:15
@casperOne Actually you are wrong... please check this answer http://stackoverflow.com/a/15310690. acc to this the keydown gets triggered for all keys but on the other hand keypress triggers only when a character is pressed. – orangespark Nov 21 '16 at 11:38
dont forget about event.metaKey – help Aug 24 '22 at 07:03
1

please note **window.event** is deprecated. – Normal Aug 28 '22 at 20:05

score 116 · Answer 2 · edited Mar 20 '20 at 22:22

116

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.

edited Mar 20 '20 at 22:22

Sebastian Simon

18,263
7
55
75

answered May 23 '19 at 00:11

lazd

4,468
3
23
17

3

Furthermore, I would add that `KeyboardEvent.keyCode` is now deprecated since a couple years ago. The best way to capture all browsers is checking `e.key` first and then fallback to `e.keyCode`. Or [you can use this polyfill](https://github.com/cvan/keyboardevent-key-polyfill/) – Yes Barry Sep 19 '19 at 13:38
do not forget about event.metaKey – help Aug 24 '22 at 07:04

score 10 · Answer 3 · edited Nov 08 '17 at 21:59

10

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

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

edited Nov 08 '17 at 21:59

Organiccat

5,633
17
57
104

answered Jul 28 '13 at 16:11

chandramouli.jamadagni

117
1
4

score 6 · Answer 4 · edited Nov 09 '15 at 19:48

6

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

Demo

edited Nov 09 '15 at 19:48

Jose Ricardo Bustos M.

8,016
6
40
62

answered Nov 09 '15 at 12:40

Mehtab

453
5
17

score 4 · Answer 5 · answered Dec 04 '20 at 22:41

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.

score 3 · Answer 6 · edited Aug 15 '17 at 10:45

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.

score 0 · Answer 7 · answered Jul 12 '22 at 07:56

0

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');
}

answered Jul 12 '22 at 07:56

Aymen Fezai

93
2
11

score -1 · Answer 8 · answered Aug 16 '22 at 02:07

-1

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

answered Aug 16 '22 at 02:07

Bertwin Romero

79
1
1

score -1 · Answer 9 · answered Mar 16 '23 at 14:21

-1

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!');
}

});

answered Mar 16 '23 at 14:21

user1561106

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 21 '23 at 14:03

Karthikeyan Ganesan · Answer 10 · 2022-08-01T05:55:39.500

-3

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

edited Aug 01 '22 at 05:55

answered Sep 28 '17 at 20:20

Karthikeyan Ganesan

1,901
20
23

1

Can someone explain why this response has been down voted so much? It is correct. Or is it because it is a windows thing? – Colin Wiseman Aug 11 '21 at 09:06
@ColinWiseman It doesn't work for me on Windows. Also, `keypress` is deprecated. – ggorlen Jul 30 '22 at 23:30
if the keypress is deprecated, please use the keydown for getting the code. I used 26 as the keycode for ctrl+z. please confirm this with console.log. Thanks – Karthikeyan Ganesan Aug 01 '22 at 05:41
deprecations and changes frequently happen in javascript. So please read the docs if the post is too old. Then only you can decide the keycode for your code. – Karthikeyan Ganesan Aug 01 '22 at 05:51
deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event – Karthikeyan Ganesan Aug 01 '22 at 05:53

Capturing ctrl+z key combination in javascript

10 Answers10

Linked

Related