关于vue按回车时刷新页面问题-已解决

星辰sea

发布于 2022-10-29 09:54:19

1.9K0

文章被收录于专栏：星辰SEA星辰SEA

最近使用vue开发遇到了一个有趣的问题，页面文本框在点击回车时会刷新页面，而且只有第一次会触发刷新，问题代码如下：

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" >
      <el-form-item label="账号描述" prop="description">
        <el-input
          v-model="queryParams.description"
          placeholder="请输入账号描述"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
</el-form-item>

点击回车按钮后不仅页面会刷新，并且路由多了一个问号

http://localhost:8088/personal/account?

经查阅资料得知原因，在当前页面元素中只有一个文本框时，点击回车时会自动提交表单；

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.
当表单中只有一个单行文本输入框时，客户端应该接受该区域中的Enter作为提交表单的请求

解决方案: 在form标签中加入@submit.native.prevent阻止事件即可：

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent>                  
      <el-form-item label="账号描述" prop="description">
        <el-input
          v-model="queryParams.description"
          placeholder="请输入账号描述"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
</el-form-item>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022/03/27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

form