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

Posted 2022-12-06 小魏的马仔

表单代码

前端代码

    <form id="searchForm" style="margin: 4px 0px 0px 15px" class="form-horizontal">
        <div class="form-group form-group-xs">
            <label class="col-xs-2 l-btn-text">&nbsp;扫码区</label>
            <div class="col-xs-4 normalSearch" style="display: inline-block;">
                <input id="code" name="code" class="form-control" placeholder="扫码或录入量具编号，员工编号，回车键添加量具">
            </div>
        </div>
    </form>

绑定的回车事件

      //进入页面后，自动获取焦点
        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;
            
        
    );