用户在文本框中按Enter的jQuery事件？

250

仅当用户在文本框中单击回车按钮时，才会触发Jquery中的任何事件吗？或可以添加以包含此内容的任何插件？如果没有，我该如何编写一个快速插件来做到这一点？

javascript jquery jquery-events

— 点击升级
source

446

您可以建立自己的自定义事件

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

http://jsfiddle.net/x7HVQ/

— 吉什努
source

11

值得注意的是，在输入检测以防止表单提交的情况下，“ keyup”事件不是最佳的，因为表单在keydown时检测到提交。因此，在这种情况下，“按键”或“按键”可能更好。

— TechNyquist

7

注意，在jQuery 3.0中不推荐使用bind（）。

— 巴特·

不同的浏览器e.keyCode对于某些键有不同的用法，更好地使用e.which，这将确保您在每个浏览器上都可以处理相同的按钮

— Oleg Shakhov

99

   $('#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）
source

8

谢谢-这个解决方案适合我的用例。但是，值得注意的是，一旦完成任何处理，您可能想要添加`$（this）.removeAttr（“ disabled”）;`来重新启用文本框。

— misterjaytee '16

39

这是给您的插件：（提琴：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')})

— 纳夫塔利又名尼尔
source

真好比我发布的网址简单得多。我不知道究竟发生了什么我张贴的文章都是关于＆为什么需要这么多的代码..

— CaptSaltyJack

1

为时已晚，我已经写了自己的：P。它也可以用更少的行来完成相同的工作..此外，将$变量用于插件不是一个好主意，因为它可能导致冲突。

— 点击在2011年

@Neal，您知道我必须在接受的答案中发布的插件代码如何进行更改，以便一个人可以执行$("#myInput").bind('click, onEnter', myCallback);并且不需要其他任何操作吗？

— 点击Upvote 2011年

1

@ClickUpvote＃1：将其从答案中删除-然后我们可以进行交谈。

— Naftali又名Neal，

@尼尔惊人的解决方案的人。我刚刚复制了该功能！谢谢！

— Bilal Fazlani

17

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

— 吉斯拉
source

2

好的，我会使用调用回调func.apply(this)，这样在回调函数中就可以像平常一样使用this它来访问触发事件的元素。

— 点击Upvote 2011年

是的，关于func.apply（this）的要点，甚至都没有考虑过。

— jzilla 2011年

简洁明了，但我想补充一点，在大多数情况下，阻止传播和默认设置是一个好主意，以防止任何表单提交。只需在位e.preventDefault(); e.stopPropagation();内添加即可if (e.keyCode)。

— Irongaze.com 2014年

8

应该很好注意的是，使用live()jQuery中已经过时，因为版本1.7和已删除的jQuery的1.9。相反，on()建议使用。

我强烈建议采用以下绑定方法，因为它可以解决以下潜在挑战：

通过将事件绑定到上document.body并将$ selector作为第二个参数传递给on()，可以在DOM上附加，分离，添加或删除元素，而无需处理重新绑定或双重绑定事件。这是因为事件是附加到document.body而不是$selector直接附加的，这意味着$selector可以添加，删除和再次添加该事件，并且永远不会加载绑定到该事件的事件。
通过调用off()before on()，此脚本可以驻留在页面的主体内，也可以驻留在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>

— 约书亚伯恩斯
source

4

如果输入为search，则还可以使用on 'search'event。例

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

。

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

— 潘文林
source

3

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

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

— 约格什罗达
source

2

另一个细微的变化。我进行了一些分权，所以我有一个插件可以捕获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 */ });

— 威尔科
source

0

在keypress阅读jQuery文档之前，我无法为Enter按钮触发事件，并且挠了一下头。

“ 当浏览器注册键盘输入时，会将keypress事件发送到一个元素。这与keydown事件类似，不同之处在于修饰键和非打印键（例如Shift，Esc和delete触发触发器keydown事件，但不是keypress事件。）https://api.jquery.com/keypress/）

我必须使用keyupor keydown事件来按回车按钮。

— 阿恩·M
source