Ctrl-Z/Y makes the browser focus on a recently changed input

Question

I have a canvas web application where I can an undo actions by pressing Ctrl+Z The application has also got text input elements

When I hit Ctrl+Z, on some occasions, the browser automatically focuses on a recently changed input. Does anyone know how to prevent this?

I'm using Chrome.

To be clear, you want to still carry out the undo/redo operation but not change the focus? If so I don't believe this is possible. It's part of the OS behaviour that the edited field regains focus. — Rory McCrossan, Jun 19 '19 at 09:02
Possible duplicate of [Capturing ctrl+z key combination in javascript](https://stackoverflow.com/questions/16006583/capturing-ctrlz-key-combination-in-javascript) — freedomn-m, Jun 19 '19 at 09:20
You can intercept `document.onkeydown` and `return false` to disable the browser's control-z. Likely browser dependent, but worked fine for me in Chrome. Example fiddle (tweaked from the above duplicate): http://jsfiddle.net/btm8qkxL/ — freedomn-m, Jun 19 '19 at 09:20

score 1 · Answer 1 · answered Apr 05 '20 at 03:18

1

I had the same problem, though interestingly on Windows only. Calling preventDefault() on the event solved it for me.

answered Apr 05 '20 at 03:18

Oak

25,332
5
90
149

score 1 · Answer 2 · answered Nov 06 '21 at 10:41

In regards to Oak's answer, in my case I couldn't just preventDefault() every keydown because we need the key strokes so this worked for me:

 keyHandler = (e: KeyboardEvent) => {
   switch (e.key) {
    case e.ctrlKey && 'z': {
      e.preventDefault();
      break;
    }
}

It is strange how an onBlur doesn't stop this from happening but if a user manually clicks off the input then CTRL + Z automatically doesn't call the input...

Ctrl-Z/Y makes the browser focus on a recently changed input

2 Answers2