通过回车键提交form表单时需要注意的问题

现在很多网站的登陆页面，在输入完账号密码后，点击回车键直接登陆的操作，就是这么一个平凡的操作，不知道大家有没有在实际工作中发现一些问题，下面我来跟大家讲讲我发现的问题，首先运行下面的代码：

<form method="get">
	<label>
		用户名:<input type="text" />
	</label>
	<button onclick="console.log('取消') ;return false;">取消</button>
	<button onclick="console.log('提交') ;return false;">提交</button>
</form>
           

当你在输入框中点击回车时，你会惊奇的发现控制台竟然打印出了

取消

，别慌，我们把取消按钮隐藏掉

display:none

:

再次刷新界面，输入框中回车，你又会发现控制台依然打印出了

取消

， 是不是觉得很神奇，然后我们把 提交按钮 和 取消按钮 调换一个位置：

<button onclick="console.log('提交') ;return false;">提交</button>
<button onclick="console.log('取消') ;return false;">取消</button>
           

这时候控制台打印出了

提交

，到这里相信大家应该明白了一个事情，如果 在

from

中进行回车操作，表单在执行

submit

的操作同时，会响应后面第一个

button

的点击事件 无论这个button是否是隐藏的都会被执行click事件，所以大家在通过回车键处理表单提交的时候，注意其中

button

的前后顺序。

当然了，有时候我们可能就需要取消按钮在前，提交按钮在后，这又该如何呢，别急，看下面代码:

<input type="button" onclick="console.log('取消') ;return false;" value="取消"/>
<input type="submit" onclick="console.log('提交') ;return false;" value="提交">
           

我们将

button

换成

input

然后分别设置不同的

type

，这时候点击回车，你会发现控制台打印了

提交

，看到不同了吧，使用

input

标签来定义按钮的时候，点击回车，会执行

type="submit"

的按钮，这样就不用去关心按钮的前后位置了。当然了你也可以手动执行

form

的

submit

方法，这个看个人喜欢。

谢谢！