网页表单回车自动提交问题

1 当前问题

网页中，一个form表单中如果type为text的input元素只有一个，输入焦点在text中时，回车表单将会自动提交（如指定表单的action属性，会提交到对应action，如未指定表单的action属性，则会刷新当前页面）。

此种情况，经常出现在查询区域的表单中，当查询区域text类型的input只有一个时，输入内容回车页面将会自动提交。

注意：这里说的form表单中的type为text的input元素只有一个，并不是说表单中只有一个元素，此时表单中可以有其他类型的元素（如checkbox/select等），只是type为text的元素只有一个。

代码如下：

<form>
    输入框： <input type="text" />
</form>  

2 问题原因

当表单中type为text的input元素只有一个，输入焦点在text中时回车表单自动提交。属于浏览器的默认行为，如不想让表单自动提交，可以从以下两个方面处理：

（1）取消浏览器此默认行为

（2）增加隐藏不显示的text类型的input，屏蔽此触发条件

3 解决问题

3.1 取消text默认提交行为

<form>
    输入框： <input type="text" onkeydown="if(event.keyCode==13){return false;}"/>
</form>

3.2 取消表单的默认提交行为

<form onsubmit="return false">
    输入框1： <input type="text" />
</form>

需注意的是，如果是采用此取消表单提交行为的方式，当表单有submit按钮元素时，点击submit按钮，表单仍然不会提交。

如下：

<form onsubmit="return false">
    输入框： <input type="text" />
    <!-- 取消表单的提交功能（点击submit类型的按钮，也不会提交表单）-->
    <input type="submit" value="提交">
</form>

3.3 增加隐藏不显示的text

<form>
    输入框： <input type="text" />
    <!-- 增加隐藏的text类型input -->
    <input type="text" style="display: none">
</form>

4 问题扩展

为什么取消默认事件时，采用return false？

解答：

return false的作用：阻止浏览器对事件的默认处理。

如仅仅是绑定了元素的事件，不return false，仍然会触发浏览器的默认事件，如下代码，回车仍然会提交表单：

<form>
    <h5>回车仍然会提交表单</h5>
    输入框： <input type="text" onkeydown="if(event.keyCode==13){}"/>
</form>