首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Javascript中区分“Enter”和“Return”键?

如何在Javascript中区分“Enter”和“Return”键?
EN

Stack Overflow用户
提问于 2011-03-24 19:22:30
回答 3查看 23.9K关注 0票数 22

一些桌面应用对“回车”键和数字键盘的“回车”键有不同的处理方式。我注意到这两个键在Javascript (jQuery)中生成相同的keyCode (13)。

它们在浏览器环境中是否转换为相等,或者是否可以区分它们(即,让CR在文本区域中创建一行,然后按“enter”键提交其表单?

EN

回答 3

Stack Overflow用户

发布于 2015-01-14 00:11:18

如果键盘上存在物理上不同的键,则浏览器应用程序应该与桌面应用程序一样能够区分。

对于最新版本的Chrome (39.0.2171.95 m)、Firefox (32.0.3)、IE (11.0.9600.17501)和Opera (12.17),键盘事件对象现在具有location属性。我假设这个属性已经存在了一段时间了,尽管它的文档很少。

onkeydown测试显示,当按下“正常”enter键时,keyCode=13和location=0;当按下数字键盘enter时,keyCode=13和location=3。

因此,下面的代码可以用来在回车时设置key==13,在数字键盘回车时设置key==176:

代码语言:javascript
复制
window.onkeydown=function(ev)
{
    var e= ev || window.event,
      key = e.keyCode || e.which;

    if ((key==13) &&
        (e.location===3))
      key=176; // 176 is the scancode for the numpad enter
    // continued....
}
票数 11
EN

Stack Overflow用户

发布于 2017-06-22 13:47:02

我提供一个更新,因为这个问题仍然出现在谷歌搜索结果的顶部附近。

根据MDN,KeyboardEvent.keyCodeKeyBoardEvent.charCode已被弃用,不应再使用。

根据需要,可以通过访问KeyboardEvent.keyKeyboardEvent.codeKeyboardEvent.location属性来确定KeyboardEvent密钥。

KeyboardEvent.key通常返回您在文本编辑器中看到的输出键和非输出键上的名称(包括区分大小写)。

KeyboardEvent.code返回密钥的字符串描述。

KeyboardEvent.location返回一个介于0和3之间的整数,表示键所在的键盘区域(分别为标准、左、右和数字板)。

这些属性之间的Understanding the difference可以帮助确定哪种属性最适合您给定的情况。在这个问题中:对于‘回车’和‘数字键盘回车’键,event.key将返回相同的输出("Enter"),而event.code将分别返回"Enter""NumpadEnter"

在这种情况下,如果您想区分数字键盘和键盘键,可以使用event.code。如果您希望它们的操作相同,event.key将是更好的选择。

如果想要区分其他键,比如左右Ctrl键,还需要查看event.location属性。

我正在添加一个小键盘事件游乐场,以查看这些事件属性之间的差异。感谢MDN提供的the concept,我只在下面稍微修改了一下:

代码语言:javascript
复制
window.addEventListener("keydown", function(event) {

  let str = "key = '" + event.key + 
              "' &nbsp code = '" + event.code + "'" + 
              "' &nbsp location = '" + event.location + "'" ;
              
  let el = document.createElement("span");
  
  el.innerHTML = str + "<br/>";
 
  document.getElementById("output").appendChild(el);
  
}, true);
代码语言:javascript
复制
#output {
  font-family: Arial, Helvetica, sans-serif;
  overflow-y: auto;
  margin-left: 4em
}

#output span {
  line-height: 2em;
}

#output :nth-child(2n) {
  color: blue;
}
代码语言:javascript
复制
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code -->

<p>
  Press keys on the keyboard to see what the KeyboardEvent's key and code values are for  each one.
</p>
<div id="output"></div>

票数 4
EN

Stack Overflow用户

发布于 2019-09-18 17:15:48

您可以通过事件的code属性来区分这两者。对于numpad,它返回NumpadEnter,对于另一个,它返回Enter。另外,与code属性不同,您也可以使用在所有情况下都有效的location属性。对于numpad Enter,它返回3,而对于other Enter,它返回0。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5418313

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档