Event shift key in combination

Question

I need undo and redo in javascript.

ctrl + z = undo

ctrl + shift + z = redo

In the code described below, undo works normally but redo does not work. I noticed if it is shift.key alon then it works, if combined with others (shift.key + ctrl.key or "z") it doesn't work. Why.., or am I wrong somewhere in the code?

function isKeyPressedUndo(event) {
  var x = document.getElementById("demo");
  if (event.ctrlKey && event.key === 'z') {
    x.innerHTML = "The UNDO key was pressed!";
  } else {
    x.innerHTML = "The UNDO key was NOT pressed!";
  }
}

function isKeyPressedRedo(event) {
  var x = document.getElementById("demo");
  if (event.shiftKey && event.ctrlKey && event.key === 'z') {
    x.innerHTML += "The REDO key was pressed!";
  } else {
    x.innerHTML += "The REDO key was NOT pressed!";
  }
}

<input type="text" onkeydown="isKeyPressedUndo(event), isKeyPressedRedo(event)">

<p id="demo"></p>

score 3 · Accepted Answer · answered Dec 21 '21 at 11:51

Debugging 101: If an if statement fails, log the values you are testing with it.

When the shift key is pressed event.key is an upper-case Z not a lower-case z.

function isKeyPressedUndo(event) {
  var x = document.getElementById("demo");
  if (event.ctrlKey && event.key === 'z') {
    x.innerHTML = "The UNDO key was pressed!";
  } else {
    x.innerHTML = "The UNDO key was NOT pressed!";
  }
}

function isKeyPressedRedo(event) {
  var x = document.getElementById("demo");
  console.log([event.shiftKey, event.ctrlKey, event.key]);
  if (event.shiftKey && event.ctrlKey && event.key === 'z') {
    x.innerHTML += "The REDO key was pressed!";
  } else {
    x.innerHTML += "The REDO key was NOT pressed!";
  }
}

<input type="text" onkeydown="isKeyPressedUndo(event), isKeyPressedRedo(event)">

<p id="demo"></p>

If I add a upper-case Z, then it works, thank you. But the following problem arose, if I turn on Caps Lock on the keyboard then nothing works, how can I enable it to work if Caps Lock is on or off? — aldin_abdagic, Dec 21 '21 at 12:04

score 2 · Answer 2 · answered Dec 21 '21 at 12:00

event.key on shift is upperrcase!

const x = document.getElementById("demo");
document.getElementById("text").addEventListener("keydown", function(event) {
  console.log("ctrl",event.ctrlKey,"shift",event.shiftKey,"key",event.key)
  if (event.ctrlKey) {
    if (event.key.toLowerCase() === 'z') {
      if (event.shiftKey) x.innerHTML = "The REDO key was pressed!";
      else x.innerHTML += "The UNDO key was pressed!";
    } else {
      if (event.key === 'y') x.innerHTML = "The REDO key was pressed!";
    }
  }
})

<input type="text" id="text" autocomplete="off">

<p id="demo"></p>

KooiInc · Answer 3 · 2021-12-21T13:27:35.267

0

When the shift key is pressed, the key becomes Z (capital z).

It is generally not a good idea to use inline event handlers. Here's a somewhat simplified snippet, using event delegation.

document.addEventListener(`keydown`, handle);

function handle(event) {
  if (event.target.id === `keyTest`) {
    // toLowerCase for shift and/or caps lock
    const isZ = event.key.toLowerCase() === `z`;
    const [isUndo, isRedo] = [
      event.ctrlKey && !event.shiftKey && isZ,
      event.shiftKey && event.ctrlKey && isZ ];
    
    document.querySelector(`#demo`).innerHTML = isUndo ?
      `The UNDO key was pressed!` 
      : isRedo ? `The REDO key was pressed!` : `Regular input &hellip;`
  }
}

<input type="text" id="keyTest">

<p id="demo"></p>

edited Dec 21 '21 at 13:27

answered Dec 21 '21 at 12:00

KooiInc

119,216
31
141
177

How do I make this to work when caps lock is on or off? – aldin_abdagic Dec 21 '21 at 12:10
Use `event.key.toLowerCase`, see edited answer – KooiInc Dec 21 '21 at 13:28

Event shift key in combination

3 Answers3