在互联网上环顾四周后,我看到了很多建议(使用 window.onkeypress,使用 jQuery 等),但几乎每个选项都有一个反驳。如何检测 Javascript 中的按键?
原文由 bobismijnnaam 发布,翻译遵循 CC BY-SA 4.0 许可协议
在互联网上环顾四周后,我看到了很多建议(使用 window.onkeypress,使用 jQuery 等),但几乎每个选项都有一个反驳。如何检测 Javascript 中的按键?
原文由 bobismijnnaam 发布,翻译遵循 CC BY-SA 4.0 许可协议
按键(输入键)
在代码段内单击,然后按 Enter 键。
香草
document.addEventListener("keypress", function(event) {
if (event.keyCode == 13) {
alert('hi.');
}
});
香草简写(箭头函数,ES6)
this.addEventListener('keypress', event => {
if (event.keyCode == 13) {
alert('hi.')
}
})
查询
$(this).on('keypress', function(event) {
if (event.keyCode == 13) {
alert('hi.')
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
jQuery 经典
$(this).keypress(function(event) {
if (event.keyCode == 13) {
alert('hi.')
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
jQuery 速记(箭头函数,ES6)
$(this).keypress((e) => {
if (e.keyCode == 13)
alert('hi.')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
甚至更短(ES6、ECMAScript 2021)
$(this).keypress(e=>
e.which==13&&alert`☺`
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
由于一些要求,这里解释一下:
随着时间的推移,事情已经过时,我重写了这个答案,所以我更新了它。仅供参考,它与“按键”无关,而与“按键”有关。所以像“Esc”这样的非字符键不应该那样工作,但我会解释。
我使用 this
在文档准备好时关注结果内的窗口范围,为了简洁起见,但这不是必需的。
弃用:
.which
和 .keyCode
方法实际上被认为已弃用,所以我建议 .code
但我个人仍然使用 keyCode,因为性能更快. jQuery 经典版本 .keypress()
并没有像某些人所说的那样正式弃用,但它们不再像 .on('keypress')
那样受到青睐,因为它有更多的功能(实时状态、多个处理程序等) . Vanilla 版本中的 'keypress'
事件也已弃用。人们应该更喜欢 beforeinput 或 keydown keyup
今天。
表现:
越快越好。这就是为什么我更喜欢 .keyCode
即使它被认为已弃用(在大多数情况下)。不过,这完全取决于您(2020 年承诺)。
原文由 Thielicious 发布,翻译遵循 CC BY-SA 4.0 许可协议
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答2.3k 阅读✓ 已解决
3 回答2.1k 阅读✓ 已解决
使用纯 Javascript,最简单的是:
但是这样一来,您只能为事件绑定一个处理程序。
此外,您可以使用以下内容潜在地将多个处理程序绑定到同一事件:
在任何一种情况下,
keyCode
在浏览器中都不一致,因此需要检查和找出更多内容。注意e = e || window.event
- 这是 Internet Explorer 的正常问题,将事件放入window.event
而不是将其传递给回调。参考:
使用 jQuery:
参考:
除了 jQuery 是一个“大型”库之外,jQuery 确实有助于解决浏览器之间的不一致问题,尤其是窗口事件……这是不可否认的。希望很明显,我为您的示例提供的 jQuery 代码更优雅、更短,但以一致的方式完成了您想要的工作。您应该能够相信
e
(事件)和e.which
(键码,用于知道按下了哪个键)是准确的。在纯 Javascript 中,除非您执行 jQuery 库内部所做的所有事情,否则很难知道。请注意,有一个
keydown
事件,它不同于keypress
。您可以在此处了解有关它们的更多信息: onKeyPress Vs。 onKeyUp 和 onKeyDown至于建议使用什么,如果您准备学习该框架,我肯定会建议使用 jQuery。同时,我想说你应该学习 Javascript 的语法、方法、特性,以及如何与 DOM 交互。一旦你理解了它是如何工作的以及发生了什么,你应该更容易使用 jQuery。对我来说,jQuery 让事情变得更加一致和简洁。最后,它是 Javascript,并包装了语言。
另一个非常有用的 jQuery 示例是 AJAX。浏览器与 AJAX 请求的处理方式不一致,因此 jQuery 将其抽象化,因此您不必担心。
这可能有助于决定: