【问题标题】：How can I detect pressing Enter on the keyboard using jQuery?如何使用 jQuery 检测键盘上的 Enter 键？
【发布时间】：2010-11-02 01:18:04
【问题描述】：

我想用jQuery检测用户是否按下了Enter。

这怎么可能？需要插件吗？

编辑：看来我需要使用keypress() 方法。

我想知道是否有人知道该命令是否存在浏览器问题 - 比如有没有我应该知道的浏览器兼容性问题？

【问题讨论】：

链接.keypress() | jQuery API Documentation
Javascript 框架中最好的事情之一是它们应该默认跨浏览器兼容。他们处理浏览器兼容性检查，因此用户不必这样做。我还没有阅读 JQuery 源代码，但我怀疑按键功能在这个意义上有什么不同。
唯一的浏览器兼容性问题是您应该使用 e.which 而不是 e.keyCode 来检测 ascii 代码。
stackoverflow.com/questions/302122/…

标签： javascript jquery keyboard-events enter jquery-events

【解决方案1】：

jQuery 的全部意义在于您不必担心浏览器的差异。我很确定您可以安全地使用 enter 在所有浏览器中设置为 13。因此，考虑到这一点，您可以这样做：

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

【讨论】：

我链接到这个是因为我读了这个并且对为什么 keypress 不能在 IE 上工作而摸不着头脑。（在IE下不会绑定$(window)）quirksmode.org/dom/events/keys.html
e.keyCode 不是 100% 跨浏览器。使用 e.which 代替如下所示
来自 jQuery 文档“Event.which 属性规范了 event.keyCode 和 event.charCode。建议观看 event.which 进行键盘按键输入。”
$(document).on('keypress', function(e) {
由于事件传播（即警报被抛出两次），我正在多次执行给定函数。要停止这种情况，请在函数末尾添加一个 e.stopPropagation()

【解决方案2】：

我写了一个小插件，以便更容易地绑定“按下回车键”事件：

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

用法：

$("#input").enterKey(function () {
    alert('Enter!');
})

【讨论】：

这对我不起作用（我在<input> 字段中得到了#input）
如果#input 元素是动态的呢？
@mplungjan 不确定您所说的“委托”是什么意思
$("#input").on("someevent","someselector",function () {})

【解决方案3】：

我无法让@Paolo Bergantino 发布的代码正常工作，但是当我将其更改为$(document) 和e.which 而不是e.keyCode 时，我发现它可以正常工作。

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Link to example on JS Bin

【讨论】：

对我来说 e.which 不适用于 IE。它对其他人有用吗？
哪个版本的IE？在 IE7 上对我来说效果很好。
来自 jQuery 文档“Event.which 属性规范了 event.keyCode 和 event.charCode。建议观看 event.which 进行键盘按键输入。”

【解决方案4】：

我发现这更能跨浏览器兼容：

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

【讨论】：

您的三元 IF 可以缩短为： var keycode = event.keyCode || event.which;
对于表单内的按钮，我将这一行放在警报（或操作）之前： event.preventDefault();它会阻止表单提交。

【解决方案5】：

您可以使用 jquery 'keydown' 事件句柄来做到这一点

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });

【讨论】：

我使用这个答案是因为我需要检查特定的输入 ID。谢谢
因为它是一个按键，我很偏执，如果用户按住回车键，这将触发多重触发。通常我更喜欢keyup。但是，对于某些用例，这可能是必需的。只是我的意见。

【解决方案6】：

使用 `event.key` 和现代 JS！

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

或者没有 jQuery：

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Mozilla Docs

Supported Browsers

【讨论】：

【解决方案7】：

我花了一些时间想出这个解决方案，希望它对某人有所帮助。

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});

【讨论】：

【解决方案8】：

有一个keypress() 事件方法。 Enter 键的 ascii 编号为 13，与所使用的浏览器无关。

【讨论】：

【解决方案9】：

当您可能还想捕获修改后的输入按下（即 ctrl-enter 或 shift-enter）时，对 Andrea 的上述答案进行了小幅扩展，使辅助方法更加有用。例如，这个变体允许像这样的绑定：

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

在用户按下 ctrl-enter 并关注该表单的文本区域时提交表单。

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

（另见Ctrl+Enter jQuery in TEXTAREA）

【讨论】：

【解决方案10】：

在某些情况下，您可能需要在页面的某个区域而不是页面的其他区域（例如下面包含 标题 <div> 带有 SEARCH 字段。

我花了一点时间才弄清楚如何做到这一点，我在此处为社区发布了这个简单而完整的示例。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

Link to JSFiddle Playground：[Submit] 按钮不执行任何操作，但从文本框控件之一按 ENTER 将不会提交表单。

【讨论】：

【解决方案11】：

试试这个来检测是否按下了 Enter 键。

$(document).on("keypress", function(e){
    if(e.which == 13){
        alert("You've pressed the enter key!");
    }
});

查看演示@detect enter key press on keyboard

【讨论】：

【解决方案12】：

我用$(document).on("keydown")。

在某些浏览器上keyCode 不受支持。与which 相同，因此如果不支持keyCode，则需要使用which，反之亦然。

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案13】：

由于keypress 事件未包含在任何官方规范中，因此使用它时遇到的实际行为可能因浏览器、浏览器版本和平台而异。

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>

希望对你有用！

【讨论】：

请注意，keypress 不在规范中（不再）的原因是它已被弃用（MDN）。

【解决方案14】：

$(document).keydown(function (event) {
      //proper indentiation of keycode and which to be equal to 13.
    if ( (event.keyCode || event.which) === 13) {
        // Cancel the default action, if needed
        event.preventDefault();
        //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
        $("#btnsearch").trigger('click');
    }
});

【讨论】：

【解决方案15】：

$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});

【讨论】：

这看起来像是对其他答案的改编 - 您能否添加一些解释以使您的答案与其他答案一样有趣？

【解决方案16】：

这是我解决的方法，你应该给return false;

 
 $(document).on('keypress',function(e) {
            if(e.which == 13) {
                $('#sub_btn').trigger('click');
                alert('You pressed a "enter" key in somewhere'); 
                return false;     
            }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="sub_email_form">
                    <div class="modal-header">
                        <button type="button" class="close" id="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Subscribe to our Technical Analysis</h4>
                    </div>
                    <div class="modal-body">
                        <p>Signup for our regular Technical Analysis updates to review recommendations delivered directly in your inbox.</p>
                        <div class="input-group">
                            <input type="email" name="sub_email" id="sub_email" class="form-control" placeholder="Enter your email" required>
                        </div>
                        <span id="save-error"></span>
                    </div>
                    <div class="modal-footer">
                        <div class="input-group-append">
                            <input type="submit" class="btn btn-primary sub_btn" id="sub_btn" name="sub_btn" value="Subscribe">
                        </div>
                    </div>
                </form>

`

【讨论】：

【解决方案17】：

检测用户是否按下回车的简单方法是使用键号，回车键号=13来检查您设备中key的值

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

按回车键，你会得到 13 的结果。使用键值你可以调用一个函数或做任何你想做的事情

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

如果你想在按下回车键后定位一个按钮，你可以使用代码

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

希望对你有帮助

【讨论】：

【解决方案18】：

我认为最简单的方法是使用vanilla javacript:

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}

【讨论】：

【解决方案19】：

$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});

【讨论】：

您能否添加一些解释性 cmets 来解释提问者您的代码是如何工作的 - 谢谢。

使用 event.key 和现代 JS！

使用 `event.key` 和现代 JS！