1 当前问题
网页中,一个form表单中如果type为text的input元素只有一个,输入焦点在text中时,回车表单将会自动提交(如指定表单的action属性,会提交到对应action,如未指定表单的action属性,则会刷新当前页面)。
此种情况,经常出现在查询区域的表单中,当查询区域text类型的input只有一个时,输入内容回车页面将会自动提交。
注意:这里说的form表单中的type为text的input元素只有一个,并不是说表单中只有一个元素,此时表单中可以有其他类型的元素(如checkbox/select等),只是type为text的元素只有一个。
代码如下:
输入框:
2 问题原因
当表单中type为text的input元素只有一个,输入焦点在text中时回车表单自动提交。属于浏览器的默认行为,如不想让表单自动提交,可以从以下两个方面处理:
(1)取消浏览器此默认行为
(2)增加隐藏不显示的text类型的input,屏蔽此触发条件
3 解决问题
3.1 取消text默认提交行为
输入框:
3.2 取消表单的默认提交行为
输入框1:
需注意的是,如果是采用此取消表单提交行为的方式,当表单有submit按钮元素时,点击submit按钮,表单仍然不会提交。
如下:
输入框:
3.3 增加隐藏不显示的text
输入框:
4 问题扩展
为什么取消默认事件时,采用return false?
解答:
return false的作用:阻止浏览器对事件的默认处理。
如仅仅是绑定了元素的事件,不return false,仍然会触发浏览器的默认事件,如下代码,回车仍然会提交表单:
回车仍然会提交表单
输入框: