Question

我创建简单的表单而不直接提交，而不是之前运行脚本。所以经典的击球输入不会发送表格。但是，由于用户经常按下输入按钮发送表单，因此我创建了一个简单的扩展名，用于点击按下单击按钮时调用脚本的输入。

例如，我有一个简单的表格：

<form id="testForm">
  <input type="email" id="email" />
  <input type="password" id="pass" />
  <button id="btnLogin" type="button">Login</button>
</form>

我创建的扩展程序看起来像这样：

(function($){
    $.fn.noEnter=function(options){
        let settings=$.extend({btn:""},options);
        function _init(){
            $(this).on("keypress",function(event){
                if(event.keyCode === 13) {
                    event.preventDefault();
                    $("#"+settings.btn).click();
                    return false;
                }
            });
        }
        this.each(function(){_init();});
        return{}
    };
}(jQuery));

然后在脚本中我称之为：

$("#email").noEnter({btn:"btnLogin"});
$("#pass").noEnter({btn:"btnLogin"});
$("#btnLogin").click(function(){
.....
});

这是有效的。对于每个输入字段，问题是它正在运行两次。看起来其他输入字段正在接受按键（或keydown）事件。或者我错过了什么？

Answer 1

使用event.stopPropagation（）;防止进一步执行。

$(this).on("keypress",function(event){
                if(event.keyCode === 13) {
                    event.stopPropagation();
                    event.preventDefault();
                    $("#"+settings.btn).click();
                    return false;
                }
            });

Answer 2

问题是this在_init函数中引用窗口对象以避免尝试下面的代码

(function($){
    $.fn.noEnter=function(options){
        let settings=$.extend({btn:""},options);
        var self = this;
        function _init(){
            $(self).on("keypress",function(event){
                if(event.keyCode === 13) {
                    event.preventDefault();
                    $("#"+settings.btn).click();
                    return false;
                }
            });
        }
        this.each(function(){_init();});
        return{}
    };
}(jQuery));

$("#email").noEnter({btn:"btnLogin"});
$("#pass").noEnter({btn:"btnLogin"});
$("#btnLogin").click(function(e){
    console.log('righty');
});

如果您想尝试

，可以使用jsfiddle作为示例

jQuery键盘事件在错误的输入字段上触发

2 个答案: