解决el-form回车后刷新页面的问题

509次阅读
没有评论

使用element ui的表单组件,当表单中只有一个输入框且绑定回车事件时,按下回车没有触发绑定事件,而是页面刷新。

官方文档解释

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.

即:当一个表单中只有一个单行文本输入字段时,用户代理应该接受该字段中的回车作为提交表单的请求。

如果希望阻止这一默认行为,可以在el-form标签上添加 @submit.native.prevent。

解决办法:

<el-form @submit.native.prevent>
  <el-form-item>
    <el-input @keyup.native.enter="submit"></el-input>
  </el-form-item>
</el-form>

正文完