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

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

• javascript
• events
• keyboard-shortcuts
• shift
• ctrl

Share Improve this question Follow asked Dec 21, 2021 at 11:46 aldin_abdagicaldin_abdagic 7911 silver badge1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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>

event.key on shift is uppercase!

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" autoplete="off">

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

When the shift key is pressed, the key bees 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 …`
  }
}

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

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