事件切換鍵組合-有解無憂

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

ctrl z = 撤銷

ctrl shift z = 重做

在下面描述的代碼中，撤消正常作業但重做不起作用。我注意到如果它是 shift.key alon 那么它就可以作業，如果與其他人（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>

uj5u.com熱心網友回復：

除錯 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>

uj5u.com熱心網友回復：

event.key on shift 是大寫的！

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>

uj5u.com熱心網友回復：

當按下 shift 鍵時，該鍵變為Z（大寫 z）。

使用行內事件處理程式通常不是一個好主意。這是一個稍微簡化的片段，使用事件委托。

document.addEventListener(`keydown`, handle);

function handle(event) {
  if (event.target.id === `keyTest`) {
    const [isUndo, isRedo] = [
      event.ctrlKey && event.key === event.getModifierState(`CapsLock`) ? `Z` : `z`,
      event.shiftKey && event.ctrlKey && event.key === `Z` ];
   //                                                   ^ capital z
    
    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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/388518.html

標籤：javascript 事件键盘快捷键转移控制

上一篇：Linux—基礎IO

下一篇：VanillaJavaScript：如何動態創建一個在用戶選擇一些文本后顯示的按鈕，然后對該文本執行某些操作？