如何使用 jQuery 检测键盘上的 Enter 键？
Posted
技术标签:
【中文标题】如何使用 jQuery 检测键盘上的 Enter 键？【英文标题】：How can I detect pressing Enter on the keyboard using jQuery? 【发布时间】：2010-11-02 01:18:04 【问题描述】：我想用jQuery检测用户是否按下了Enter。
这怎么可能？需要插件吗？
编辑：看来我需要使用keypress() 方法。
我想知道是否有人知道该命令是否存在浏览器问题 - 比如有没有我应该知道的浏览器兼容性问题？
【问题讨论】：
链接.keypress() | jQuery API Documentation javascript 框架中最好的事情之一是它们应该默认跨浏览器兼容。他们处理浏览器兼容性检查，因此用户不必这样做。我还没有阅读 JQuery 源代码，但我怀疑按键功能在这个意义上有什么不同。 唯一的浏览器兼容性问题是您应该使用 e.which 而不是 e.keyCode 来检测 ascii 代码。 ***.com/questions/302122/… 【参考方案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")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>【讨论】：
【参考方案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.')"> </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">×</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 来解释提问者您的代码是如何工作的 - 谢谢。以上是关于如何使用 jQuery 检测键盘上的 Enter 键？的主要内容，如果未能解决你的问题，请参考以下文章
使用 actionscript 按键盘上的 enter 提交表单