在 JavaScript 中处理 Alt + Enter 按键答案

【问题标题】：Handling Alt + Enter key press in JavaScript在 JavaScript 中处理 Alt + Enter 按键
【发布时间】：2015-08-08 15:24:09
【问题描述】：

我正在尝试获取一些纯 JavaScript 代码来处理文本区域中的 Alt + Enter 按键事件，但失败得很惨。怎么了？

HTML

<textarea id="ta" style="width:100%;height:500px">
</textarea>

JavaScript

var ta = document.getElementById('ta');
ta.onkeypress = function(e) {
   if (e.charCode == 10 && e.altKey){
      alert(
         "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
          + "charCode: " + e.charCode + "\n"
          + "Alt key pressed: " + e.altKey + "\n"
      );      
   }
};

JSFiddle

Here

【问题讨论】：

不是输入13的charCode吗？
使用 onkeydown 代替

标签： javascript dom-events keypress keyboard-events

【解决方案1】：

这个基于 MDN 文档中的this example 的解决方案似乎是跨浏览器最友好的方式：

var ta = document.getElementById('ta');
ta.onkeydown = function (event) {
    if (event.defaultPrevented) {
       return;
    }
    var handled = false;
    if (event.key !== undefined) {
       if (event.key === 'Enter' && event.altKey) {
          alert('Alt + Enter pressed!');
       }
    } else if (event.keyIdentifier !== undefined) {
       if (event.keyIdentifier === "Enter" && event.altKey) {
          alert('Alt + Enter pressed!');
       }

    } else if (event.keyCode !== undefined) {
       if (event.keyCode === 13 && event.altKey) {
          alert('Alt + Enter pressed!');
       }
    }
    if (handled) {
       event.preventDefault();
    };
};

Updated fiddle

【讨论】：

【解决方案2】：

Enter 是密钥代码 13，您需要 keydown 或 keyup，而不是 keypress（用于可打印字符），您应该使用 keyCode 而不是 charCode。像这样：

ta.onkeydown = function(e) {
    if (e.keyCode == 13 && e.altKey) { ...

【讨论】：

它可以工作，但which 属性是deprecated。但是，使用 keyCode 也可以，因此请更新您的答案。
抱歉，keyCode 好像也是 deprecated。啊！

【解决方案3】：

简单修复：使用keyCode 而不是charCode。 ENTER 的 keyCode 是 13。

var ta = document.getElementById('ta');
ta.onkeypress = function(e) {
   if (e.keyCode == 13 && e.altKey){
      alert(
         "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
          + "keyCode: " + e.keyCode + "\n"
          + "Alt key pressed: " + e.altKey + "\n"
      );      
   }
};

【讨论】：

你测试了吗？它在 Chrome 中对我不起作用。
@RichieHindle 有趣。在火狐中工作。 jsfiddle 我认为在按键事件中包含 keyCode 是不标准的。
@RichieHindle 所以实际上 ALT+Enter 不会触发 Chrome 中的按键事件，而确实会发生按键事件。如您的回答中所述，可打印字符与关键事件的一般发生之间的区别似乎是标准化的方式，那么，我猜 FF 只是在做其他事情？
我不知道这是否是严格规定的，但我的直觉是 Chrome 是正确的 - keypress 用于可打印字符（Win32 语言中的 WM_CHAR）和 keydown/keyup 更通用（WM_KEYDOWN /WM_KEYUP)。