如何找出按下的字符键？

Question

我想知道在纯javascript中以跨浏览器兼容的方式按下了什么字符键.

Answer 1

"清除"JavaScript:

<script type="text/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));
  }
</script>

<form>
  <input type="text" onkeypress="return myKeyPress(event)" />
</form>

JQuery的:

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

Answer 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.

Answer 3

更新,更清洁:使用event.key.没有更多的任意数字代码!

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

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

Mozilla文档

支持的浏览器

Answer 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>

*注意：这适用于“运行代码片段”

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