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

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

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

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

http://jsfiddle.net/x7HVQ/

2011-06-29 16:51:02

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

2011-06-29 17:08:08

这里有一个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/

2011-06-29 17:10:36

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

2012-03-27 16:01:18

值得注意的是，live()在jQuery中的使用从1.7版开始就已弃用，并在jQuery 1.9中被移除。相反，建议使用on()。

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

By binding the event onto document.body and passing $selector as the second argument to on(), elements can be attached, detached, added or removed from the DOM without needing to deal with re-binding or double-binding events. This is because the event is attached to document.body rather than $selector directly, which means $selector can be added, removed and added again and will never load the event bound to it. By calling off() before on(), this script can live either within within the main body of the page, or within the body of an AJAX call, without having to worry about accidentally double-binding events. By wrapping the script within $(function() {...}), this script can again be loaded by either the main body of the page, or within the body of an AJAX call. $(document).ready() does not get fired for AJAX requests, while $(function() {...}) does.

这里有一个例子:

<!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>

2013-11-05 16:21:14

另一个微妙的变化。我采取了轻微的权力分离，所以我有一个插件来捕捉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 */ });

2014-04-25 15:16:44

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

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

2016-06-01 04:49:59

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

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

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

2018-12-14 02:54:03

我无法让按键事件为进入按钮开火，挠了我的头一段时间，直到我阅读jQuery文档:

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

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

2019-08-12 17:03:19

//简单明了的解决方案

$(document).ready(function(){

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

});

2021-09-17 08:04:38

<form name="searchForm" id="searchForm" onsubmit="doSomething(event)">
   <input type="text" name="search" id="search">
</form>
<script>
   function doSomething(event){
      let $val = $('form#searchForm input[name="search"]').val();
        console.log($val);
      event.preventDefault();
    }
</script>
 One simple way it can be done in this way. Enter text or number, hit enter key and get the entered input value.

2022-12-13 08:39:33

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

推荐文章

最新文章

标签