禁用 Chrome 的文本输入撤消/重做 (CTRL+Z / CTRL+Y)答案

【问题标题】：Disable Chrome's text input undo/redo (CTRL+Z / CTRL+Y)禁用 Chrome 的文本输入撤消/重做 (CTRL+Z / CTRL+Y)
【发布时间】：2017-02-09 15:50:19
【问题描述】：

我目前正在开发一个 Web 应用程序，但遇到了一个问题。您可能知道与否，chrome 有一个功能，当您点击 CTRL+Z 和“重做”时，它会为 <input>（尤其是文本输入）提供“撤消”功能使用 CTRL+Y 在普通网站中这似乎是一个不错的功能，但目前我正在制作一个也使用这些键盘快捷键的图像编辑器（CTRL+Z & CTRL+Y）。

在我的应用程序中，我也有一个文本输入，所以当我更改文本输入的内容然后点击 CTRL+Z 以撤消图像编辑器中的更改时，它会撤消文本编辑器中的更改！

这里有一个 Codepen 来演示效果
（说明在 Codepen 中）

总之，我想删除 chrome 中的 undo/redo 功能，我该怎么做呢？

【问题讨论】：

标签： javascript html google-chrome undo textinput

【解决方案1】：

您可以使用 onkeydown 事件和 preventDefault.. 例如。

document.onkeydown = function(e) {
  if (e.ctrlKey && e.key === 'z') {
    e.preventDefault();
    alert("CTRL + Z!");
  }
}

【讨论】：

是的，我喜欢这个，它适用于 IE11 和 Chrome。 :) 但是，在 IE11 和 Chrome 的上下文菜单中仍然可以使用撤消，因此也需要额外的工作来禁用它:( 我这样做了：if (e.ctrlKey && e.key === 'z' ) { 返回 false; }

【解决方案2】：

var ctrlDown = false;
var ctrlKey = 17, vKey = 86, cKey = 67, zKey = 90;

document.body.onkeydown = function(e) {
  if (e.keyCode == 17 || e.keyCode == 91) {
    ctrlDown = true;
  }
  if ((ctrlDown && e.keyCode == zKey) || (ctrlDown && e.keyCode == vKey) || (ctrlDown && e.keyCode == cKey)) {
    e.preventDefault();
    return false;
  }
}
document.body.onkeyup = function(e) {
  if (e.keyCode == 17 || e.keyCode == 91) {
    ctrlDown = false;
  };
};

<body>
    <input type='text' value='test' />
</body>

这行得通吗？

从here 窃取，在here 上作为@KadeHafen 的评论发现。

【讨论】：

啊！我以前用过e.preventDefault，但它对我不起作用..是因为我用的是keypress而不是keydown吗？
@Bintang 我认为使用keypress 可能是您的问题，因为如果我在答案中更改它似乎不起作用。