JQuery事件用户按下enter在文本框?

Jquery中是否有任何事件只在用户点击文本框中的回车按钮时才会触发?或者任何插件，可以添加到包括这个?如果不是，我该如何编写一个快速插件来做到这一点?

373787 次浏览
小开
最佳答案

您可以连接您自己的自定义事件

$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});

http://jsfiddle.net/x7HVQ/ < a href = " http://jsfiddle.net/x7HVQ/ " > < / >

小开

这是一个插件给你:(提琴: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')})
小开

这里有一个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");
});
});

http://jsfiddle.net/VrwgP/30/ < / >

小开 
   $('#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");
}
});
小开

它应该是好注意，在jQuery中live()的使用从1.7版本开始已经是弃用，在jQuery 1.9中已经是删除。相反，建议使用on()。

我强烈建议使用以下绑定方法，因为它解决了以下潜在的挑战:

  1. 通过将事件绑定到document.body并将$selector作为第二个参数传递给on()，元素可以从DOM中附加、分离、添加或删除，而不需要处理重新绑定或双重绑定事件。这是因为事件被附加到document.body而不是直接附加到$selector，这意味着$selector可以被添加、删除和再次添加，并且永远不会加载绑定到它的事件。
  2. 通过在on()之前调用off()，这个脚本既可以存在于页面的主体中，也可以存在于AJAX调用的主体中，而不必担心意外的双绑定事件。
  3. 通过将脚本包装在$(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>
小开

另一个微妙的变化。 我想要一个轻微的权力分离，所以我有一个插件来捕捉enter键，然后我只是正常地绑定到事件:

(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 */ });
小开

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;
}

您的表单没有默认提交按钮

小开

如果你的输入是search，你也可以使用on 'search'事件。例子

<input type="search" placeholder="Search" id="searchTextBox">

．

$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});
小开

我不能让keypress事件为进入按钮触发，挠了我的头一段时间，直到我阅读jQuery文档:

“当浏览器注册键盘输入时，按键事件被发送给元素。这类似于keydown事件，除了修改器和非打印键(如Shift、Esc和delete)触发keydown事件，而不是按键事件。”(https://api.jquery.com/keypress/)

我必须使用keyup或keydown事件来捕捉按下enter按钮。

小开

//简单明了的解决方案

$(document).ready(function(){


$('#TextboxId').keydown(function(event){
if (event.which == 13){
//body or action to be performed
}
});


});

提交答案