如何找出按下了哪个字符键？

118

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

javascript dom-events keypress

— X
source

1

是不是所有的这些答案的问题：“什么键被按下了吗？” 如果在执行过程中，javascript代码想知道当前是否按住了键盘上的某个键，该怎么办？

— mwardm

2

event.key会直接给您按下的字符

— Gibolt

158

“清除” 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)); 
});

— yo
source

6

这对于字母字符是可以的，但是点/括号和其他印刷符号呢？

— VoVaVc

6

@VoVaVc：它也适用于那些。关键是使用keypress事件，该事件为您提供了字符代码，而不是keyup或keydown为您提供了键码。

— 蒂姆·唐

2

@aljgom，e.key仍然没有完整的浏览器支持。

— 安迪·默瑟

1

不适用于您必须按shift键才能制作的符号，例如！

— 柯蒂斯

5

所有主要浏览器现在都支持@AndyMercer密钥：developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…–

— Ray

34

这个问题上有上百万个重复项，但无论如何还是再次出现：

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。

— 蒂姆·唐
source

23

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

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

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

如果要确保仅输入单个字符，请选中key.length === 1，或确保它是您期望的字符之一。

Mozilla文件

支持的浏览器

— 吉博尔特
source

这是用于node.js吗？

— merrybot

不，节点仅表示任何DOM元素。如果您将Node.js连接到UI，我想它可以工作

— Gibolt

某些移动设备的

— 按键

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

— 列夫杰夫
source

1

使用这个：

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');
  }
}

— 卡卡索
source

1

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

— kki3908050
source

1

这不是@Coyod 2009年答案的精确副本吗？

— 克里斯·卡罗尔

1

我最喜欢以一种复杂的方式执行此操作的库之一是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>

— 偶极矩
source

@DanLowe我刚刚添加了一个片段。

— dipole_moment 2015年

未捕获的TypeError：Mousetrap.record不是HTMLButtonElement.onclick（****。html：20）的recordSequence（****。html：12）的函数

— Irrmich

-2

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

— Gomozor
source