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

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

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

页面代码类似这样：

                                

                                    

                                        
                                            问卷名称
                                        
                                        

                                            
                                        
                                        状态
                                        

                                            
                                                全部
                                                正在进行
                                                已结束
                                            
                                        
                                        

                                            
                                                查询
                                            
                                        
                                    
                                

仔细一看，该页面的查询方式是使用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完美解决。