vue的一个奇怪问题

Question

我用的element ui，然后只放一个el-input，这个时候按回车，页面自动刷新。(注，没有监听事件哦！)

<el-form-item label="标题">
    <el-input v-model="form.title"></el-input>
</el-form-item>

刷新后地址栏变成了

然后在多加一个el-input后，按回车就不会刷新，地址栏也不会有变化。哪位有碰到过这个问题吗？

Answer 1

先分析一下原因：
1.在一个 form 表单中，若只有一个 input，按回车键表单会自动提交
2.当表单中存在多个 input 时，按回车键不会执行任何操作，这是 form 表单的一个特性。

解决方法：
1、清理 form 元素
2、增加非 [type=hidden] 的 input
3、阻止回车事件
4、阻止表单提交

Answer 2

看起来像是回车事件触发了表单的自动提交，具体原因不明。

Answer 3

W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

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

Answer 4

这跟elementUI无关，这是form标签的一个特性，当你只有一个input标签时，按回车会直接触发onsubmit。这看起来很鸡肋。