Javascript - 触发特定的键盘键答案

【问题标题】：Javascript - trigger specific keyboard keysJavascript - 触发特定的键盘键
【发布时间】：2015-08-03 10:28:30
【问题描述】：

我有这段代码：

window.addEventListener('keydown', function (e) { 
   console.log(e.which); 
   console.log(e.keyCode); 
});

 var evObj = new KeyboardEvent('keydown', {key:65});
 window.dispatchEvent(evObj);

为什么我在控制台看到 0 而不是 65 ??

e.keyCode 和 e.which 都是 0 而不是 65，我使用的是 Chrome 最新版本

非常感谢。

【问题讨论】：

我试过googlejavascript keyevent chrome，应该是this的bug。链接来自Post。
如果您只需要 Chrome，就像您在其他地方评论的那样，这是 this question 的副本，它有一个有效的答案。
Object.defineProperty(evObj , "which", {"value" : 666}) 将覆盖 which 作为解决方法。

标签： javascript events triggers keyboard

【解决方案1】：

chrome有一个bug，keyCode和which不可配置。

可能的解决方法：定义自定义 getter

 window.addEventListener('keydown', function (e) { console.log(e.which); });
 
 (function(o,k){
    //use createEvent for better compatibility
   var evObj = document.createEvent('HTMLEvents');
    evObj.initEvent('keydown', true, false);
    Object.defineProperty(evObj, 'keyCode', {
      get: function() {
        return k;
      }
    });
    Object.defineProperty(evObj, 'which', {
      get: function() {
        return k;
      }
    });
    o.dispatchEvent(evObj); 
 }(window,65));

【讨论】：

是的，刚刚发现in this answer。
但这是否意味着我触发了正确的指定键盘按钮！？
这意味着您的which/keyCode - 事件的属性将返回所需的值（65）
@Dr.Molle 但除此之外我还需要它来真正触发关键...：D
真正触发了事件，只要“trigger”表示监听器会被执行（否则控制台看不到65）。当你想要类似于sendKeys 的东西时，这是一个完全不同的问题。

【解决方案2】：

e.keyCode 和 e.which 都是 0 而不是 65，我使用的是 Chrome 最新版本

因为您设置的是key，而不是keyCode 和which。 According to MDN、key 是键的表示，而不是键码。要初始化keyCode 和/或which，您应该...这样做（请参阅MDN's article on KeyboardEvent）。

var evObj = new KeyboardEvent('keydown', {keyCode:65, which:65});

这是一个示例，但它似乎在 Chrome 中不起作用（仍然得到 0）——这是一个 Chrome 错误，解决方法如下。可以在 Firefox 中使用。在 IE11 中失败，因为 IE11 不喜欢 new KeyboardEvent：

window.addEventListener("keydown", function(e) {
  snippet.log("keyCode = " + e.keyCode + ", which = " + e.which);
}, false);
setTimeout(function() {
  var evObj = new KeyboardEvent('keydown', {keyCode:65, which:65});
  snippet.log("Sending event");
  window.dispatchEvent(evObj);
}, 300);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

您可以使用 the technique from this answer 解决 Chrome 错误：

window.addEventListener("keydown", function(e) {
  snippet.log("keyCode = " + e.keyCode + ", which = " + e.which);
}, false);
setTimeout(function() {
  var evObj = new KeyboardEvent('keydown', {keyCode:65, which:65});
  // Chrome bug workaround:
  if (evObj.keyCode != 65) {
    Object.defineProperty(evObj, "keyCode", {
      value: 65
    });
    Object.defineProperty(evObj, "which", {
      value: 65
    });
  }
  snippet.log("Sending event");
  window.dispatchEvent(evObj);
}, 300);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

【讨论】：

@T.J.Crowder 非常感谢！我不应该接受 Dr.Molle 的回答吗？
@sbaaaang：无论你喜欢哪个，这完全取决于你。以上并非来自Dr.Molle的回答。它是从the other answer I linked to 派生的，它在SO 的其他地方。（我在寻找 Chrome 为何不工作时发现了它。）

【解决方案3】：

注意：在 Firefox 中，keyCode 属性不适用于onkeypress 事件（只会返回 0）。对于跨浏览器解决方案，将which 属性与keyCode 一起使用，例如：

var x = event.which || event.keyCode;  // Use either which or keyCode, depending on browser support

【讨论】：

我只需要在 Chrome 上使用它