关于表单回车自动提交的种种

本贴最后更新于 3241 天前,其中的信息可能已经沧海桑田

起因

业务场景为一个 type=text 的表单元素,通过 ajax 进行搜索。但是遇到一个 bug,就是在输入之后按回车,就会自动提交表单。查找之后发现了浏览器的表单提交特性

如果只有一个 text 表单元素,回车会自动提交表单!!

为了避免这种 bug,将表单回车后提交的场景都测试了一遍。

场景一:只有一个 type=text 表单元素

<form action="http://blog.600km.xyz">
    <input type="text" name="username" />
</form>

在此场景下,只要在 input 中按下回车键,就会自动提交表单。
为了避免自动提交,可以设置一个隐藏的 text 元素,如

<form action="http://blog.600km.xyz">
	<input type="text" style="display:none" />
    <input type="text" name="username" />
</form>

场景二:有 n 个 type=text 和一个 type=submit 表单元素

<form action="http://blog.600km.xyz">
    <input type="text" name="username" />
    <input type="text" name="password" />
	<input type="submit" value="Submit!" />
</form>

在此场景下,只要在 input 中按下回车键,就会自动提交表单。
为了避免自动提交,网上常见的例子是在 form 表单中监听 onkeydown 事件,如果是回车输入,则返回 false,阻止表单提交。

<form action="http://blog.600km.xyz" onkeydown="if(event.keyCode==13){return false;}">
    <input type="text" name="username" />
    <input type="text" name="password" />
    <input type="submit" value="Submit!" />
</form>

但是这种写法存在 1 个问题:如果是 textarea,可能会需要回车操作。

为了解决上述问题,需要增加针对 textarea 的判断条件,而且还要注意兼容 ie。

<script type="text/javascript">
document.onkeydown = function(event) {
	event = event || window.event;
	var param = event.target || event.srcElement;
	// if (param.name=="username"){return true;}
	if (event.keyCode == 13) {
		if ("INPUT" == param.tagName) {
			return false;
		}
	}
};
</script>
<form action="http://blog.600km.xyz">
	<input type="text" name="username" />
	<input type="text" name="password" />
	<textarea name="introduction"></textarea>
	<input type="submit" value="Submit!" />
</form>

根据*if (param.name=="username"){return true;}*就可以自定义在某个表单元素中,点击回车键,就可以提交表单。

场景三:有 n 个 type=text,没有 type=submit 元素

此时点击回车键时,表单不会提交。可以通过监听 onkeydown 事件,利用 submit()方法,根据 keyCode 和 tagName 或者表单元素的 name 来自定义提交规则

<script type="text/javascript">
document.onkeydown = function(event) {
	event = event || window.event;
	var param = event.target || event.srcElement;
	if (event.keyCode == 13 && param.name=="password"){
		document.getElementById("entityForm").submit();
	}
};
</script>
<form action="http://blog.600km.xyz" id="entityForm">
	<input type="text" name="username" />
	<input type="text" name="password" />
	<textarea name="introduction"></textarea>
</form>

场景四:有 n 个 type=text 和一个 button 标签元素

button 标签,如果未指定 type,则在 ie6 和 ie7 下为 type="button", 在 ie8 及 chrome 和火狐下为 type="submit",为了避免这种混乱,button 标签一定要指定 type。
如果指定为 type="button",则和场景三的处理方式一致,
如果是 type="submit",则同场景二。

结语

ie 的特性让 web 开发者抓狂,本来很多浏览器自身属性可以方便解决的问题,都需要重新造一个轮子,达到浏览器兼容。
制造轮子和规则,为了规避约定或者隐藏特性带来的不可预知的麻烦。

打赏 50 积分后可见
50 积分 • 2 打赏
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • form
    3 引用 • 3 回帖
  • submit
    1 引用 • 3 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • zonghua 1

    之前用 Boostrap,按钮都是提交表单。问了别人才知道,默认按钮都是提交表单类型

  • sound

    👎

  • sound