Submit浏览器默认回车触发提交

1.如果表单里有一个type=”submit”的按钮，回车键生效。
2.如果 表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
3.如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为 type=submit。
4.其他表单元素如textarea、select不影 响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
5.type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用 CSS添加背景图合适些。

表现形式不同，IE浏览器下input没有焦点回车同样会触发提交，Edge浏览器input必须获取焦点回车才能触发提交。

解决方法：

1、增加一个隐藏的输入框

<inputitype="text"style=“display:none”/>

增加了一个隐藏的输入框之后，表单的文本框不再是唯一的，回车不会触发提交事件

2、去掉输入框的回车事件

<inputtype="text"οnkeydοwn=“returnClearSubmit(event)”/>

functionClearSubmit(e){

if(e.keyCode==13){

returnfalse;

}

}

但是有的需求又要有回车事件，视情况选择

3、阻止表单默认提交事件

如果onsubmit句柄返回fasle，表单的元素就不会提交。如果该函数返回其他值或什么都没有返回，则表单会被提交。

由于onsubmit句柄可以取消表单的提交，所以它对于进行表单验证是十分理想的；

这样的话，修改form的onsubmit事件可以让敲入回车的时候执行我们想要的操作而不跳转到action所指定的url，如下

<formaction="myurl"onSubmit=“fun1();returnfalse;”>

变种：element官方解决方案：在el-from加上@submit.native.prevent

el-form:inline="true"class=“demo-form-inline”@submit.native.prevent

<el-form-itemlabel="名称:"style=“margin-bottom:0”>

<el-inputplaceholder=“名称”@keyup.enter.native="doFilter(5)"v-model=“likeName”>

<el-form-itemstyle=“margin-bottom:0”>

<el-buttonclass=“btnCheck”@click="doFilter(5)"style=“margin-bottom:0”>查询