如何使用jQuery检测键盘上的回车键？

小开

有一个keypress（）事件方法。输入键的ASCII号是13，不依赖于正在使用的浏览器。

小开

最佳答案

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

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

小开

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

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

链接到JS bin上的例子

小开

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

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

小开

我写了一个小插件，使其更容易绑定“按回车键”事件：

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

小开

检测用户是否按下了输入的简单方法是使用键号。输入键号等于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 Internet Explorer only is on keydown$("p").children(":last").remove();}$("div").text(e.which);});

按下输入键，您将获得13的结果。使用键值，您可以调用函数或做任何您想做的事情：

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

如果您想在按下输入键后定位按钮，您可以使用代码：

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

小开

您可以使用jQuery'keydown'事件处理程序执行此操作：

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

小开

在某些情况下，您可能需要为页面的某个区域抑制输入键，但对于页面的其他区域则不需要，例如下面的页面包含报头<div>和搜索字段。

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

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

链接到JSFiddle Playground：[Submit]按钮不执行任何操作，但从某个文本框控件中按输入将不会提交表单。

小开

我想到了这个解决方案：

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

小开

当您可能还想捕获修改后的回车键（即Ctrl+输入或Shift+输入）时，安德里亚的回答的次要扩展使helper方法更有用。例如，此变体允许绑定，如：

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

当用户按下Ctrl+输入并专注于该表单的文本区域时提交表单。

$.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);}})})}

（另见*在文本区域中使用jQuery Ctrl+enter）

小开

我认为最简单的方法是使用vanilla JavaScript：

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

小开

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

$(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留档

支持的浏览器

小开

尝试此操作以检测按下的回车键。

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

演示@检测键盘上的回车键按下

小开

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

小开

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

小开

由于任何官方规范都没有涵盖keypress事件，因此使用它时遇到的实际行为可能因浏览器、浏览器版本和平台而异。

$(document).keydown(function(event) {if (event.keyCode || event.which === 13) {// Cancel the default action, if neededevent.preventDefault();// Call function, trigger events and everything you want to do. Example: 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>

小开

我用了$(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.whichvar key = e.keyif (code == ENTER_KEY_CODE || key == ENTER_KEY) {console.log("Enter key pressed")}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

小开

$(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 neededevent.preventDefault();//call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click$("#btnsearch").trigger('click');}});

小开

这就是我解决问题的方法。你应该用return false;

$(document).on('keypress', function(e) {if(e.which == 13) {$('#sub_btn').trigger('click');alert('You pressed the "Enter" key 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>

如何使用jQuery检测键盘上的回车键？

使用event.key和现代JavaScript！

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