阻止 form input 输入框按回车自动提交表单

发现问题：

写东西时发现form 表单 中的 input 在 按下回车键（enter）时自动提交表单，而且在地址栏中显示提交的内容，这个东西就很鸡肋，我如果填的是密码，就会感觉这东西很不正规，那咱就找解决方法吧！

解决过程

在搜索时发现原来在 form 表单中只有一个 input输入框时按回车键浏览器默认会触发表单提交，默认这两个字对 js 来说首先想到的就是 阻止浏览器默认行为，在此奉上一份vue 阻止事件冒泡，捕获方法文章，方便查阅

解决方法

找到问题的原因，那解决就很简单了，阻止浏览器默认行为不就得了（event.preventDefault()）

1. 给form 添加方法

<!-- 可以只有修饰符，不执行任何事件 -->
<form @submit.prevent></form>
<!-- 也可以执行某一事件 -->
<form @submit.prevent="onSubmit"></form>

2. input 添加方法

<!-- 可以只有修饰符，不执行任何事件 -->
<input @keydown.enter.prevent />
<!-- 也可以执行某一事件 -->
<input @keydown.enter.prevent="onSubmit" />

当然也有其他的解决方法，只不过个人觉得这个方法最简单方便，原生 js 的话直接用 event.preventDefault() 即可

我的个人博客有空来坐坐

https://www.wangyanan.online