form表单input回车提交问题

问题：文本框输入完成后点击回车页面刷新
问题出在form上，当表单中只有一个文本框的时候获取焦点并点击回车以后会提交表单内容，就会发生刷新事件。

解决方法：

一、增长一个隐藏的输入框

<input itype="text" style="display:none" />

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

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

<input type="text"  onkeydown="return ClearSubmit(event)" />
function ClearSubmit(e) {
    if (e.keyCode == 13) {
        return false;
    }
}

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

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

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

        因为 onsubmit 句柄能够取消表单的提交，因此它对于进行表单验证是十分理想的；

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

<form action="myurl" onSubmit="fun1();return false;">

　　

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

<el-form :inline="true"  class="demo-form-inline"  @submit.native.prevent>
    <el-form-item label="名称:" style="margin-bottom:0">
    <el-input placeholder="名称" @keyup.enter.native="doFilter(5)"  v-model="likeName"></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom:0">
    <el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0">查询</el-button>
    </el-form-item>
</el-form>