关于前端页面回车键+搜索框产生得刷新失败问题详解

首先说下情景，最近本人接手的一个后台管理系统，在bug回归测试中发现，对页面的查询搜索框按下回车，会导致页面出现404错误。

如图，项目大部分版面都有类似于这样的搜索框，点击查询可以搜索成功，但是按下回车键却重定向到一个未知的路径。

页面代码类似这样：

<form id="formSearch1" class="form-horizontal">
                                <div class="tab-pane active" id="tab-1">
                                    <div class="form-group" style="margin-top: 1px">
                                        <label class="control-label col-sm-1" for="txt_search_title">
                                            问卷名称
                                        </label>
                                        <div class="col-sm-2">
                                            <input class="form-control" id="qsName" name="questionSur.qsName"/>
                                        </div>
                                        <label class="col-sm-1 control-label">状态</label>
                                        <div class="col-sm-2">
                                            <select class="form-control m-b" id="state" name="questionSur.state">
                                                <option value="">全部</option>
                                                <option value="1">正在进行</option>
                                                <option value="2">已结束</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-1" style="text-align: left;">
                                            <button type="button" id="btn_query1"
                                                class="btn btn-primary">
                                                查询
                                            </button>
                                        </div>
                                    </div>
                                </div>
</form>

仔细一看，该页面的查询方式是使用ajax来提交表单，而enter键默认是提交该表单，我们又没有写提交表单的路径，系统便默认使用项目的路径加上参数name来提交，当然提交到失败路径，然后404了。

####################################################################################################

那么，我首先想到的是禁止提交该表单，是不是就能解决问题了呢。

我直接再页面头文件中引入一个通用js文件，在所有的该类搜索表单上面绑定一段js，把表单的提交方法直接返回false，那么页面自然不会跳转了。

var arrForm = document.querySelectorAll('.form-horizontal');
    arrForm.forEach(x=>{  
        x.onsubmit = function(e) {
               return false;
        };
    })

ok，果然，再一次回车之后，整个页面便没有了反应。问题解决，但是作为程序员的我怎么可能就以这么粗糙的方式来解决问题呢？

下一步，我又想到把enter的事件绑定查询方法，所以，我便又加了一段代码，把enter事件变成点击查询按钮。

$(document).keydown(function (ev) {
        if(ev.keyCode == '13'){
            var arr = document.querySelectorAll(".btn.btn-primary");
            arr.forEach(v=>{  
                v.click();
            }); 
        }
    })

ok，代码再一次成功了，成功的把回车绑定了查询，bug完美解决。