小谢第13问：输入框绑定回车enter事件自动刷新页面

今天给input输入框绑定了按enter搜索事件，结果发现按enter键后会自动刷新页面 

$("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;"。