【前端】jQuery中input绑定回车事件不生效，直接刷新页面的问题

青旅半醒 2022-12-22 13:24 320阅读 0赞

## 表单代码 ##

### 前端代码 ###

### 绑定的回车事件 ###

//进入页面后，自动获取焦点
            document.querySelector('#code').focus();
    	 //绑定回车事件。
            document.onkeydown = function (e) {
                var ev = document.all ? window.event : e;
                if (ev.keyCode == 13) {
                    queryByCode();
                }
            }

回车事件还可以绑定某页面元素

$("#code").focus(function () {
            document.onkeydown = function (e) {
                var ev = document.all ? window.event : e;
                if (ev.keyCode == 13) {
                    queryByCode();
                }
            }
        });

因为页面上只有一个输入框，所以效果是一样的。

## 现象 ##

每次输入完成后，按下回车键，页面就会自动刷新一下，并不会进入我们绑定的函数。但是其他调用同样代码的页面，并没有出现这个问题

经查阅资料，发现是form表单中，如果只有一个input，回车键将触发自动提交，而表单内的input框的回车事件，实际上是调用了，但被页面刷新给重置了。

## 解决方案 ##

1.  如果不是特别需要表单元素，直接将表单改为div即可解决
2.  如果必须要保留表单，那么有3种方法  
    （1） 在表单中，增加一个隐藏的input，使表单内的input元素大于1个  
    （2）给表单增加οnsubmit=“return false;”  
    （3）给input的绑定事件中，增加return false，阻止其继续调用

$("#code").focus(function () {
            document.onkeydown = function (e) {
                var ev = document.all ? window.event : e;
                if (ev.keyCode == 13) {
                    queryByCode();
                    return false;
                }
            }
        });