如何找出按下的字符键？答案

【问题标题】：How to find out what character key is pressed?如何找出按下的字符键？
【发布时间】：2010-12-23 05:27:43
【问题描述】：

我想知道在纯 Javascript 中以跨浏览器兼容的方式按下了哪个字符键。

【问题讨论】：

所有这些答案不都是针对“按下了什么键？”的问题吗？如果在执行时，javascript 代码想知道键盘上的某个键当前是否被按下怎么办？
event.key 会直接给你按下的字符

【解决方案1】：

“清除”JavaScript：

function myKeyPress(e){
  var keynum;

  if(window.event) { // IE                  
    keynum = e.keyCode;
  } else if(e.which){ // Netscape/Firefox/Opera                 
    keynum = e.which;
  }

  alert(String.fromCharCode(keynum));
}

&lt;input type="text" onkeypress="return myKeyPress(event)" /&gt;

JQuery:

$("input").keypress(function(event){
  alert(String.fromCharCode(event.which)); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>

【讨论】：

这适用于字母字符，但点/括号和其他印刷符号呢？
@VoVaVc：它也适用于那些人。关键是使用keypress 事件，它给你一个字符代码，而不是keyup 或keydown 给你一个键码。
@aljgom, e.key 仍然没有完整的浏览器支持。
不适用于必须按 shift 才能制作的符号，例如 !
@AndyMercer 密钥现在被所有主流浏览器支持：developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…

【解决方案2】：

这里有一百万个重复的问题，但无论如何这里又出现了：

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    alert(charStr);
};

我见过的关于关键事件的最佳参考是http://unixpapa.com/js/key.html。

【讨论】：

【解决方案3】：

更新更简洁：使用event.key。没有更多的任意数字代码！

注意：旧属性（.keyCode 和 .which）已弃用。

node.addEventListener('keydown', function(event) {
    const key = event.key; // "a", "1", "Shift", etc.
});

如果您想确保只输入单个字符，请检查key.length === 1，或者它是您期望的字符之一。

Mozilla Docs

Supported Browsers

【讨论】：

这是针对 node.js 的吗？
不，节点只是指任何 DOM 元素。如果你有 Node.js 连接到 UI，我想它会工作
某些移动设备的keydown不起作用它返回未定义

【解决方案4】：

试试：

<table>
  <tr>
    <td>Key:</td>
    <td id="key"></td>
  </tr>
  <tr>
    <td>Key Code:</td>
    <td id="keyCode"></td>
  </tr>
  <tr>
    <td>Event Code:</td>
    <td id="eventCode"></td>
  </tr>
</table>
<script type="text/javascript">
  window.addEventListener("keydown", function(e) {
    //tested in IE/Chrome/Firefox
    document.getElementById("key").innerHTML = e.key;
    document.getElementById("keyCode").innerHTML = e.keyCode;
    document.getElementById("eventCode").innerHTML = e.code;
  })
</script>

*注意：这适用于“运行代码 sn-p”

这个网站和我上面的代码一样：Keycode.info

【讨论】：

这是另一个类似的网站，但有一些额外的选项：keyjs.dev
在 chrome、xfce、意大利语键盘、西班牙语布局上，按“

【解决方案5】：

使用这个：

function onKeyPress(evt){
  evt = (evt) ? evt : (window.event) ? event : null;
  if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));
    if (charCode == 13) 
        alert('User pressed Enter');
  }
}

【讨论】：

【解决方案6】：

**check this out** 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).keypress(function(e)
        {

            var keynum;
            if(window.event)
            { // IE                 
                keynum = e.keyCode;
            }
                else if(e.which)
                    { 
                    // Netscape/Firefox/Opera                   
                    keynum = e.which;
                    }
                    alert(String.fromCharCode(keynum));
                    var unicode=e.keyCode? e.keyCode : e.charCode;
                    alert(unicode);
        });
});  

</script>
</head>
<body>

<input type="text"></input>
</body>
</html>

【讨论】：

这不是@Coyod 2009 年答案的几乎完全相同的副本吗？

【解决方案7】：

我最喜欢以复杂方式执行此操作的库之一是Mousetrap。

它配备了各种插件，其中一个是record 插件，它可以识别按下的按键序列。

例子：

<script>
    function recordSequence() {
        Mousetrap.record(function(sequence) {
            // sequence is an array like ['ctrl+k', 'c']
            alert('You pressed: ' + sequence.join(' '));
        });
    }
</script>


<button onclick="recordSequence()">Record</button>

【讨论】：

未捕获的类型错误：Mousetrap.record 不是 HTMLButtonElement.onclick (****.html:20) 的 recordSequence (****.html:12) 处的函数

【解决方案8】：

document.onkeypress = function(event){
    alert(event.key)
}

【讨论】：

两个反对票，但现在解释为什么它被投票反对。我认为当您评论此答案的问题时会有所帮助。谢谢
很容易投票，我想你最好自己试试这个 sn-p :) 顺便说一句，标题很常见