是否有Jquery中的事件，只有在用户按下文本框中的回车键时才会触发？或者有任何可以添加以包括此功能的插件吗？如果没有，我该如何编写一个快速的插件来实现这一点？
11个回答
492
你可以连接你自己的自定义事件
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
- Jishnu A P
3
115
$('#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");
}
});
- Etienne Dupuis
1
8谢谢 - 这个解决方案符合我的使用情况。然而，值得注意的是，一旦完成任何处理，您可能需要添加
$(this).removeAttr("disabled"); 来重新启用文本框。 - misterjaytee40
这是一个为您提供的插件：（Fiddle：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')})
- Naftali
7
不错。比我发布的那个URL简单多了。我想知道我发布的那篇文章到底在讲什么，为什么需要这么多代码... - CaptSaltyJack
1太晚了，我已经自己写好了 :P。它也可以用更少的行数完成相同的工作..此外，使用
$变量作为插件并不是一个好主意，因为它可能会引起冲突。 - Ali@Neal，你知道我在被接受的答案中发布的插件代码需要如何更改，才能够做到
$("#myInput").bind('click, onEnter', myCallback); 并且不需要任何其他东西就可以工作吗？ - Ali1@ClickUpvote #1：把它从答案中删除 -- 然后我们可以谈论。 - Naftali
@Neal 太棒了，你的解决方案太厉害了。我刚才只需要复制那个函数就好了！谢谢！ - Bilal Fazlani
显示剩余2条评论
19
这是一个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");
});
});
- jzilla
3
2很好，我会使用
func.apply(this)来调用回调函数，这样在回调函数内部，您可以像平常一样使用this来访问触发事件的元素。 - Ali是的，关于func.apply(this)的观点很好，我甚至没有考虑过。 - jzilla
简洁明了，但我建议在大多数情况下停止事件传播和默认行为，以防止任何表单提交。只需在
if (e.keyCode)中添加e.preventDefault(); e.stopPropagation();即可。 - Irongaze.com8
需要注意的是，自从jQuery版本1.7起，
我强烈建议采用以下方法进行绑定，因为它解决了以下潜在问题：
1.通过将事件绑定到
2.在调用
3.通过将脚本包装在
以下是一个示例：
live()的使用已被弃用，并在jQuery版本1.9中被删除。建议改用on()。我强烈建议采用以下方法进行绑定，因为它解决了以下潜在问题：
1.通过将事件绑定到
document.body并将$selector作为第二个参数传递给on()，可以在不需要处理重新绑定或双重绑定事件的情况下，附加、分离、添加或删除元素。这是因为事件是附加到document.body而不是直接附加到$selector，这意味着$selector可以被添加、删除和再次添加，而永远不会加载绑定到它的事件。2.在调用
on()之前调用off()，使得该脚本可以在页面的主体内或AJAX调用的主体内工作，而无需担心意外双重绑定事件。3.通过将脚本包装在
$(function() {...})中，该脚本可以再次由页面的主体或AJAX调用的主体加载。对于AJAX请求，$(document).ready()不会触发，而$(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>
- Joshua Burns
8
如果您的输入是
search，您也可以使用on 'search'事件。例如：<input type="search" placeholder="Search" id="searchTextBox">
.
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});
- Linh
5
//简短易懂的解决方案
$(document).ready(function(){
$('#TextboxId').keydown(function(event){
if (event.which == 13){
//body or action to be performed
}
});
});
- Zeeshan Liaqat
1
3
HTML代码：
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">
Java Script 代码
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;
}
您的表单没有默认的提交按钮
- yogesh lodha
2
另一个微妙的变化。 我进行了轻微的权力分离，因此我有一个插件来启用捕获回车键，然后我只需正常绑定事件：
(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 */ });
- Wilco
1
我无法让"keypress"事件触发回车按钮，为此我苦思冥想了一段时间，直到阅读了jQuery文档: "当浏览器注册键盘输入时，"keypress"事件会发送到元素。这类似于"keydown"事件，但是修改键和非打印键（如Shift、Esc和delete）会触发"keydown"事件而不是"keypress"事件。" (https://api.jquery.com/keypress/)。我必须使用"keyup"或"keydown"事件来捕获按下回车键。
- Arne M
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
e.keyCode，最好使用e.which，这将确保您在每个浏览器上处理相同的按钮。 - Oleg Shakhov