首先说下情景,最近本人接手的一个后台管理系统,在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完美解决。