事件shift键组合

Question

我需要在 javascript 中撤消和重做。

ctrl + z = 撤消

ctrl + shift + z = 重做

在下面描述的代码中，撤消正常工作，但重做不起作用。我注意到如果它是单独的shift.key那么它就可以工作，如果与其他键（shift.key + ctrl.key或“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");
  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>

Answer 1

调试 101：如果

if

语句失败，记录您正在使用它进行测试的值。

按下shift键时

event.key

是大写字母

Z

不是小写字母

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>

Answer 2

shift 上的 event.key 是大写的！

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>

Answer 3

按下 Shift 键时，该键变为

Z

（大写 z）。

使用内联事件处理程序通常

不是一个好主意。这是一个稍微简化的片段，使用事件委托。

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>