如何检测在键盘上使用jQuery按Enter键?
我想检测用户是否使用jQuery按Enter
。
这怎么可能? 它需要一个插件吗?
编辑:它看起来像我需要使用keypress()
方法。
我想知道是否有人知道这个命令是否有浏览器问题 – 就像我应该知道的浏览器兼容性问题?
jQuery的重点是你不必担心浏览器的差异。 我很确定你可以安全地在所有浏览器中input 13。 所以考虑到这一点,你可以这样做:
$(document).keypress(function(e) { if(e.which == 13) { alert('You pressed enter!'); } });
我写了一个小插件,使其更容易绑定“按下回车键”事件:
$.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!'); })
我无法得到由@Paolo Bergantino发布的代码工作,但是当我将其更改为$(document)
和e.which
而不是e.keyCode
我发现它工作正常。
$(document).keypress(function(e) { if(e.which == 13) { alert('You pressed enter!'); } });
链接到JS斌的例子
我发现这是更多的跨浏览器兼容:
$(document).keypress(function(event) { var keycode = event.keyCode || event.which; if(keycode == '13') { alert('You pressed a "enter" key in somewhere'); } });
你可以使用jquery'keydown'事件句柄来做到这一点
$( "#start" ).on( "keydown", function(event) { if(event.which == 13) alert("Entered!"); });
有一个keypress()事件方法。 Enter键的ASCII码是13,不依赖于正在使用的浏览器。
我花了一些时间想出这个解决scheme,我希望它可以帮助别人。
$(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'); } }); });
上面的Andrea的回答的一个小的扩展使得帮助者方法更有用,当你也许想要捕获修改的input按(即按Ctrl + Enter或Shift-Enter)。 例如,这个变体允许绑定像:
$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')
当用户按下ctrl-enter时,提交一个表单,焦点在表单的textarea上。
$.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); } }) }) }
(另请参阅TEXTAREA中的Ctrl + Enter jQuery )
在某些情况下,您可能需要在页面的特定区域禁止ENTER键,而不是页面的其他区域,如下面包含带有SEARCH字段的标题 <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]
button不起任何作用,但是从其中一个文本框控件按下ENTER将不会提交表单。
检测用户是否按下input的简单方法是使用input键号码= 13的键号检查设备中键的值
$("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 } });
如果您想要按一次button,则可以使用代码
$(document).bind('keypress', function(e){ if(e.which === 13) { // return $('#butonname').trigger('click'); } });
希望它有帮助
我认为最简单的方法将使用香草的 javacript:
document.onkeyup = function(event) { if (event.key === 13){ alert("enter was pressed"); } }
使用event.key
$(document).keypress(function(event) { if (event.key === "Enter") { // Do something } });
Mozilla文档
支持的浏览器