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 118 · Accepted Answer · edited May 29 '22 at 13:55

118

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

12,849
8
110
182

answered Apr 15 '13 at 02:04

zerkms

240,587
65
429
525

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

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

87

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

16,564
7
51
69

answered May 23 '19 at 00:11

lazd

4,018
2
21
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

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,623
17
56
101

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.

7,881
6
39
58

answered Nov 09 '15 at 12:40

Mehtab

373
4
16

score 3 · Answer 5 · 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 3 · Answer 6 · 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 7 · edited Sep 29 '17 at 09:32

-3

Use this code for CTRL+Z. keycode for Z in keypress is 122 and the CTRL+Z is 26. check this keycode in your console area

 $(document).on("keypress", function(e) {
       console.log(e.keyCode);
       /*ctrl+z*/
       if(e.keyCode==26)
       {
          //your code here
       }
    });

edited Sep 29 '17 at 09:32

Mwiza

6,098
3
41
35

answered Sep 28 '17 at 20:20

Karthikeyan Ganesan

1,572
17
20

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

score -4 · Answer 8 · edited Sep 16 '17 at 16:58

-4

This Plugin Made by me may be helpful.

Plugin

You can use this plugin you have to supply the key Codes and function to be run like this

simulatorControl([17,90], function(){console.log('You have pressed Ctrl+Z');});

In the code I have displayed how to perform for Ctrl+Z. You will get Detailed Documentation On the link. Plugin is in JavaScript Code section Of my Pen on Codepen.

edited Sep 16 '17 at 16:58

Fabrizio

7,190
6
37
86

answered Jul 06 '17 at 14:36

10011101111

177
1
12

Capturing ctrl+z key combination in javascript

8 Answers8

Linked

Related