关于输入框按回车自动刷新页面的4个解决方案

• 起因

最近加入了一套回车自动查询的方法，好几个界面都加好了，可是就是有一个界面的回车事件总是不生效并且似乎还自动刷新了整个界面。

$("input[name='projectName']").keyup(function(){
     if(event.keyCode == 13){
          reloadGrid();
     }
});

• 分析问题所在

当我删除掉了写的keyup方法之后一样出现了回车自动刷新整个界面的情况，因页面最初不是自己写的，我查询了整个关于这个输入框的绑定事件似乎都没有造成这个情况的可能。

<input type="text" class="form-control" id="projectName" name="projectName" placeholder="请输入项目名称"/>

甚至当我删除掉了id name属性一样会有自动刷新的情况，然后就推断出不是绑定了事件。

然后又想到可不可能是有人写过哪个元素的第几个子元素之类的，我在这个input下面加入了一个新的input。

<input type="text" class="form-control" placeholder="请输入项目名称"/>
<input type="text" class="form-control" placeholder="wingzing"/>

发现加入了新的input之后，不会出现自动刷新整个页面的情况了，立刻想到是不是这个form表单的原因。

• 原因

在一个form表单中，若只有一个input，按回车键表单会自动提交，但是当表单中存在多个input时，按回车键不会执行任何操作，这是form表单的一个特性。

• 解决方案

1、直接去除掉form表单，当然这是最简单粗暴的方法。

2、如果一个input会自动提交，那么比较容易想到的是再加一个input。值得注意的是 这里的input不能设置type为hidden，这样一样是不生效的，form一样会认为只有一个input。需要设置成 <input type="text" class="form-control" style="display:none"> 。

3、给input加上回车事件直接return false。在input加上οnkeydοwn="if(event.keyCode==13){return false;} 。

4、直接阻止form表单的提交，在form表单加入οnsubmit="return false;"。

• 后言

开发过程遇到预期之外的问题，可以一步步进行思维的debug 从而逐渐发现问题所在，得知问题发生的原因并给予解决。

如果我的这篇文章对你有帮助或者有任何疑点都欢迎在评论区交流！