在表单输入框按回车页面刷新的问题

问题描述

页面上有一个查询功能，查询条件只有名称查询，为了方便后期扩展，查询项用表单写的。当打开后台后第一次在该页面输入框输入内容按回车，页面刷新。正确响应应该是无反应。

原因

这个问题是由于W3C标准行为导致的：当form元素中只有一个输入框时，在该输入框中按下回车会自动提交表单，表单提交会导致页面刷新，而非执行预期的无反应状态。

解决方案

1.在form标签上添加阻止默认提交的修饰符（推荐）。

<el-form @submit.native.prevent>
    <el-input v-model="inputValue"></el-input>
</el-form>

.prevent修饰符会调用event.preventDefault()阻止默认提交行为。

.native修饰符用于监听组件根元素的原生事件。我使用了Element-UI组件，所以使用.native修饰符监听原生事件。如果用的原生form标签，就用 @submit.prevent 就行了。

2.如果不考虑后期增加查询项的问题，可以移除form标签，不用表单功能。

3.添加隐藏的输入框，通过使表单不只有一个输入框来规避标准行为。

<el-input style="display:none"></el-input>