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

本文主要是介绍通过回车键提交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 style="display:none" onclick="console.log('取消') ;return false;">取消</button>

再次刷新界面，输入框中回车，你又会发现控制台依然打印出了 取消 ， 是不是觉得很神奇，然后我们把 提交按钮 和 取消按钮 调换一个位置：

<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方法，这个看个人喜欢。

谢谢！

这篇关于通过回车键提交form表单时需要注意的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---