HTML - 输入框 Input 按回车 Enter 自动刷新页面解决方案

背景

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

$("input[name='projectName']").keyup(function(){
if(event.keyCode==13){
reloadGrid(); // 自己封装的方法     }
});

分析

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

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

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

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

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

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

原因

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

解决

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

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

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

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