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

Question

I'm creating simple forms without direct submitting, than running script before. So classic hitting enter will not send the form. However, since users are often hitting enter button to send a form, I create simple extension for hitting enter that is calling script when button is clicked.

For example, I have a simple form:

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

And extension I created is looking like this:

(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));

Then in script I call something like this:

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

And this is working. Problem is that it is working twice , for each input field. Looks like other input field is accepting keypress (or keydown) event. Or am I missing something?

Answer 1

use event.stopPropagation(); to prevent executing further.

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

Answer 2

The problem is this is referring window object in _init function to avoid that try below code

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

There is working example is jsfiddle if you want to try