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>