jQuery事件用户按下input文本框？
只有在用户点击文本框中的inputbutton时才会触发Jquery中的任何事件吗？ 或者可以添加任何插件来包含这个？ 如果没有，我怎么写一个快速的插件来做到这一点？
你可以连接你自己的自定义事件
$('textarea').bind("enterKey",function(e){ //do stuff here }); $('textarea').keyup(function(e){ if(e.keyCode == 13) { $(this).trigger("enterKey"); } }); $('#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"); } });
这是一个插件给你:(小提琴： 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')})
inheritance人一个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 http://jsfiddle.net/VrwgP/30/
应该注意的是，jQuery中的live()的使用已经从版本1.7开始被弃用 ，并且已经在jQuery 1.9被移除了。 相反，build议使用on() 。
我会强烈build议下面的绑定方法，因为它解决了以下潜在的挑战：
- 通过将事件绑定到
document.body并将$ selector作为on()的第二个parameter passing，可以将元素附加，分离，添加或从DOM中移除，而无需处理重新绑定或双重绑定事件。 这是因为事件是直接附加到document.body而不是$selector，这意味着$selector可以被添加，删除和再次添加，并且永远不会加载绑定到它的事件。 - 通过在
on()off()之前调用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>
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; }
您的表单没有默认提交button
另一个微妙的变化。 我去了一个轻微的权力分离，所以我有一个插件来启用回车键，然后我通常绑定到事件：
(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) { });
这个变体允许你使用事件委托（绑定到尚未创build的元素）。
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });
