jQuery - keydown / keypress /keyup ENTERKEY 检测？答案

【问题标题】：jQuery - keydown / keypress /keyup ENTERKEY detection?jQuery - keydown / keypress /keyup ENTERKEY 检测？
【发布时间】：2010-08-11 21:28:52
【问题描述】：

试图让 jQuery 检测 enter 输入，但检测到空格和其他键，未检测到 enter。下面有什么问题：

$("#entersomething").keyup(function(e) {
    alert("up");
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code==13) {
        e.preventDefault();
    }

    if (code == 32 || code == 13 || code == 188 || code == 186) {
        $("#displaysomething").html($(this).val());
});

<input id="entersomething" />
<div id="displaysomething"&gt;&lt;/div&gt;

http://jsfiddle.net/zeRrv/

【问题讨论】：

为了移动支持和简洁使用event.key 而不是event.which/keyCode（它们已被弃用）
是的，我问这个问题已经快 10 年了。很高兴知道 jquery 仍然存在并不断发展！

标签： jquery

【解决方案1】：

JavaScript/jQuery

$("#entersomething").keyup(function(e){ 
    var code = e.key; // recommended to use e.key, it's normalized across devices and languages
    if(code==="Enter") e.preventDefault();
    if(code===" " || code==="Enter" || code===","|| code===";"){
        $("#displaysomething").html($(this).val());
    } // missing closing if brace
});

HTML

<input id="entersomething" type="text" /> <!-- put a type attribute in -->
<div id="displaysomething"></div>

【讨论】：

哇！！顺便说一句，您是否推荐一个可以检查大括号的 IDE？尝试使用 aptana，但难以适应，并且没有用于 in-ide 预览的快捷方式！
如果你在 OSX 上，那么 Textmate 会为我赢得胜利。 Zend Studio 和 Aptana 很不错，我相信你可以手动添加快捷键/热键来做你想做的事？？？对event.which很感兴趣，以前从不知道：developer.mozilla.org/en/DOM/event.charCode#Notes
@balupton - 我应该补充一点，event.which 在 jQuery 中被规范化，在 jQuery.event.fix 函数中
请注意，which 现在已被弃用。 developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which
@oriadam 随时编辑答案以提供现在更好的选择。

【解决方案2】：

我认为你会遇到 keyup 事件 - 因为它首先触发 keypress - 如果你想排除 Enter 键，你将无法停止第二个事件的传播。

【讨论】：

【解决方案3】：

更新：现在我们有移动和自定义键盘，我们不能继续信任这些任意键码，例如 13 和 186。换句话说，停止使用event.which/event.keyCode 并开始使用event.key：

if (event.key === "Enter" || event.key === "ArrowUp" || event.key === "ArrowDown")

【讨论】：

【解决方案4】：

jQuery Sparkle 为此包含一个自定义事件。来源可以在这里看到： http://github.com/balupton/jquery-sparkle/blob/master/scripts/resources/jquery.events.js

这是一个演示http://www.balupton.com/sandbox/jquery-sparkle/demo/#event-enter

【讨论】：