在 JavaScript 中按特定键执行某些操作在 Chrome 中有效，但在 Firefox 中无效

Question

我正在使用 2 个函数来检测按下的键是否与我想要的匹配，如果匹配，则执行某些操作。它在 Chrome 中就像一个魅力，但在 Firefox 中这两个功能都不起作用。有什么方法可以让它在那里工作吗？

document.onkeypress = function() {
  if (event.charCode == 49) {
    alert("You pressed 1!");
  }
  if (event.charCode == 50) {
    alert("You pressed 2!");
  }
  if (event.charCode == 51) {
    alert("You pressed 3!");
  }
  if (event.charCode == 52) {
    alert("You pressed 4!");
  }
}

document.onkeydown = function() {
  if (event.keyCode == 122) {
    alert("You pressed F11!");
  }
}

<span>Press 1, 2, 3, 4 and F11 to launch different events.</span>

Answer 1

您忘记声明 event 参数。也许 Chrome 会自动执行此操作。这适用于两种浏览器-

document.onkeypress = function(event) {
  if (event.charCode == 49) {
    alert("You pressed 1!");
  }
  if (event.charCode == 50) {
    alert("You pressed 2!");
  }
  if (event.charCode == 51) {
    alert("You pressed 3!");
  }
  if (event.charCode == 52) {
    alert("You pressed 4!");
  }
}

document.onkeydown = function(event) {
  if (event.keyCode == 122) {
    alert("You pressed F11!");
  }
}

Answer 2

注意：以下 2016 年的答案使用 which, but in new code, use key or code。

该代码中的主要问题是您依赖于全局 event 对象，该对象未在 DOM 事件规范中指定并且是一个 Microsoft-specific 对象Chrome决定支持。

在 standards-compliant 浏览器上，您使用 addEventListener 并接受事件对象作为参数：

document.addEventListener("keypress", function(e) {
    // ....
}, false);

如果您需要支持 IE8 及更早版本（或 IE9+ 在其损坏的“兼容”模式下），您需要 attachEvent，它期望您使用全局 event 对象：

document.attachEvent("onkeypress", function() {
    // ....
});

所以：

function handler(e) {
    e = e || window.event;
    // ...
}
if (document.addEventListener) {
    document.addEventListener("keypress", handler, false);
} else {
    document.attachEvent("onkeypress", handler);
}

第二个问题是charCode被弃用了； according to MDN，您应该使用 which 作为数值或（对于可打印字符）char 作为 (one-character) 字符串。对于旧版浏览器，您可能会回退到 charCode 或 keyCode。

我也会使用 switch。

所以：

function handler(e) {
    e = e || window.event;
    switch (e.which || e.charCode || e.keyCode) {
        case 49:
            console.log("You pressed 1");
            break;
        case 50:
            console.log("You pressed 2");
            break;
        case 51:
            console.log("You pressed 3");
            break;
        case 52:
            console.log("You pressed 4");
            break;
    }
}
if (document.addEventListener) {
    document.addEventListener("keypress", handler, false);
} else {
    document.attachEvent("onkeypress", handler);
}

在 JavaScript 中按特定键执行某些操作在 Chrome 中有效，但在 Firefox 中无效

Pressing specific keys to do certain things in JavaScript works in Chrome but not Firefox

javascript

keycode

onkeydown

onkeypress