输入框回车导致页面刷新？

参考这篇文章：# 表单提交中的input、button、submit的区别

图片也直接拿文章里的图片了

表单的 提交 submit

form表单的提交 submit默认是get方法，在地址栏会显示表单内容参数。
就像这样：

搜索

但我们现在业务中使用更多的搜索一般是点击【搜索】 触发自定义的函数 处理返回值并渲染，很少用form表单自带的submit方法了。

submit 提交 导致页面刷新刷新

当form表单只有一个input输入框的时候，点击回车，自动触发 form表单的submit事件。
这导致的后果就是，页面刷新。

如上所说，表单submit，地址栏附带表单参数，地址栏url改变，也会触发页面刷新。

回车也会触发表单提交 导致页面刷新

当表单内只有一个输入框，我们想要给input输入框添加回车事件，最终也会冒泡到form表单上。

不想刷新怎么办

事实上我们并不想要这种效果，
解决方案也很简单：

参考解决方案： # el-form的el-input 输入框按回车页面刷新问题

当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent。

<el-form :model="Form" label-width="100px" @submit.native.prevent>
    <el-form-item label="名称">
        <el-input v-model="Form.name"></el-input>
    </el-form-item>
</el-form>

参考解决方案： # 输入框按回车，自动刷新页面？

1. 直接去除掉form表单。
2. 再加一个input，需要设置成 <input type="text" class="form-control" style="display:none"> 。
3. 给input加上回车事件直接return false。 在input加上οnkeydοwn="if(event.keyCode==13){return false;} 。
4. 直接阻止form表单的提交，在form表单加入οnsubmit="return false;"。