阻止input回车触发button按钮click事件

问题描述

<div>
	<button @click="Action">点击事件但并不是提交表单</button>
	<input type="text" name="name" autocomplete="off"/>
</div>

如上面的简单代码，不管是div还是form，当我在Input上单击回车的时候，发现执行了button上绑定的方法！？这就会影响业务流程，也算是个bug，但这是为什么呢？

因为在 form表单中 button 有三种类型（type=）submit、button、reset ，默认为 submit当不加 type=“button” 的时候在input框回车，button就会被当做 submit 调用

解决

方法1：给 button 加 type 类型

<button type="button" @click="Action">点击事件但并不是提交表单</button>

方法2：给 input 加阻止回车鼠标事件

<input type="text" name="name" autocomplete="off" @keydown.enter.prevent/>

方法3：手动为button赋予属性

<button type="button">xxx</button>