用户在文本框中按下回车的 JQuery 事件？
Posted
技术标签:
【中文标题】用户在文本框中按下回车的 JQuery 事件？【英文标题】：JQuery Event for user pressing enter in a textbox? 【发布时间】：2011-09-25 08:11:17 【问题描述】：Jquery 中是否有任何事件仅在用户点击文本框中的输入按钮时触发？或者可以添加任何插件来包含这个？如果没有，我将如何编写一个可以做到这一点的快速插件？
【问题讨论】：
【参考方案1】：您可以连接自己的自定义事件
$('textarea').bind("enterKey",function(e)
//do stuff here
);
$('textarea').keyup(function(e)
if(e.keyCode == 13)
$(this).trigger("enterKey");
);
http://jsfiddle.net/x7HVQ/
【讨论】：
值得注意的是，在输入检测以防止表单提交的场景中，“keyup”事件不是最佳的，因为表单检测到keydown时提交。因此，在这种情况下，“keydown”或“keypress”可能会更好。 注意，在 jQuery 3.0 中不推荐使用 bind()。 不同浏览器的某些键有不同的e.keyCode，最好使用e.which，这样可以保证您在每个浏览器上处理相同的按钮【参考方案2】：
$('#textbox').on('keypress', function (e)
if(e.which === 13)
//Disable textbox to prevent multiple submit
$(this).attr("disabled", "disabled");
//Do Stuff, submit, etc..
//Enable the textbox again if needed.
$(this).removeAttr("disabled");
);
【讨论】：
谢谢 - 这个解决方案适合我的用例。但是，值得注意的是，一旦完成任何处理，您可能需要添加 `$(this).removeAttr("disabled");` 以重新启用文本框。【参考方案3】：这是一个适合你的插件：（小提琴：http://jsfiddle.net/maniator/CjrJ7/）
$.fn.pressEnter = function(fn)
return this.each(function()
$(this).bind('enterPress', fn);
$(this).keyup(function(e)
if(e.keyCode == 13)
$(this).trigger("enterPress");
)
);
;
//use it:
$('textarea').pressEnter(function()alert('here'))
【讨论】：
不错。比我发布的那个 URL 简单得多。我想知道我发布的这篇文章到底是关于什么以及为什么需要这么多代码.. 太晚了，我已经自己写了：P。它还可以在更少的行中完成相同的工作。此外，为插件使用$ 变量不是一个好主意，因为它可能会导致冲突。
@Neal，你知道我在接受的答案中发布的插件代码必须如何更改，以便可以执行$("#myInput").bind('click, onEnter', myCallback); 并且不需要其他任何东西就可以工作吗？
@ClickUpvote #1：将其从答案中删除——然后我们可以谈谈。
@Neal 惊人的解决方案人。我刚刚复制了那个功能！谢谢！【参考方案4】：
这里有一个 jquery 插件来做到这一点
(function($)
$.fn.onEnter = function(func)
this.bind('keypress', function(e)
if (e.keyCode == 13) func.apply(this, [e]);
);
return this;
;
)(jQuery);
要使用它，请包含代码并像这样进行设置：
$( function ()
console.log($("input"));
$("input").onEnter( function()
$(this).val("Enter key pressed");
);
);
jsfiddle of it here http://jsfiddle.net/VrwgP/30/
【讨论】：
很好，我会使用func.apply(this) 调用回调，这样在回调函数中您就可以正常使用this 来访问触发事件的元素。
是的，关于 func.apply(this) 的好点，甚至没有考虑过。
简洁明了，但我要补充一点，在大多数情况下停止传播和默认设置是一个好主意，以防止任何表单提交。只需在if (e.keyCode) 位内添加e.preventDefault(); e.stopPropagation();。【参考方案5】：
应该注意，在 jQuery 中使用 live() 已弃用自版本 1.7 起并已删除在 jQuery 1.9 中。相反，建议使用on()。
我强烈建议使用以下绑定方法，因为它解决了以下潜在挑战：
-
通过将事件绑定到
document.body 并将$selector 作为第二个参数传递给on()，可以从DOM 中附加、分离、添加或删除元素，而无需处理重新绑定或双重绑定事件.这是因为事件是附加到document.body而不是直接附加到$selector，这意味着$selector可以添加、删除和再次添加，并且永远不会加载绑定到它的事件。
通过在on() 之前调用off()，此脚本可以存在于页面主体中或AJAX 调用主体中，而不必担心意外的双重绑定事件。
通过将脚本包装在$(function() ...) 中，该脚本可以再次被页面主体或AJAX 调用的主体加载。 $(document).ready() 不会被 AJAX 请求触发，而 $(function() ...) 会。
这是一个例子：
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
var $selector = $('textarea');
// Prevent double-binding
// (only a potential issue if script is loaded through AJAX)
$(document.body).off('keyup', $selector);
// Bind to keyup events on the $selector.
$(document.body).on('keyup', $selector, function(event)
if(event.keyCode == 13) // 13 = Enter Key
alert('enter key pressed.');
);
);
</script>
</head>
<body>
</body>
</html>
【讨论】：
【参考方案6】：如果您的输入是search，您也可以使用on 'search' 事件。示例
<input type="search" placeholder="Search" id="searchTextBox">
.
$("#searchPostTextBox").on('search', function ()
alert("search value: "+$(this).val());
);
【讨论】：
【参考方案7】：HTML 代码：-
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">
Java 脚本代码
function AddKeyPress(e)
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
document.getElementById('btnEmail').click();
return false;
return true;
您的表单没有默认提交按钮
【讨论】：
【参考方案8】：另一个微妙的变化。 我进行了轻微的权力分离，所以我有一个插件可以捕获回车键，然后我只是正常绑定到事件：
(function($) $.fn.catchEnter = function(sel)
return this.each(function()
$(this).on('keyup',sel,function(e)
if(e.keyCode == 13)
$(this).trigger("enterkey");
)
);
;
)(jQuery);
然后在使用中：
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) );
此变体允许您使用事件委托（绑定到您尚未创建的元素）。
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) /*process input */ );
【讨论】：
【参考方案9】：在我阅读 jQuery 文档之前，我无法让 keypress 事件触发回车按钮，我摸不着头脑：
"当浏览器注册键盘输入时，keypress 事件被发送到一个元素。这类似于 keydown 事件，除了修饰键和非打印键如 Shift、Esc 和 delete 触发 keydown 事件，但不是按键事件。" (https://api.jquery.com/keypress/)
我必须使用keyup 或keydown 事件来捕捉按下回车键。
【讨论】：
【参考方案10】：//简短的解决方案
$(document).ready(function()
$('#TextboxId').keydown(function(event)
if (event.which == 13)
//body or action to be performed
);
);
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。以上是关于用户在文本框中按下回车的 JQuery 事件？的主要内容，如果未能解决你的问题，请参考以下文章
C#：如何在文本框中按下回车键触发按钮，但仍然允许“Ctrl+A”等快捷键通过？
在 Struts 2 + jQuery + json 中按回车键停止提交表单