Element UI 的el-input同时绑定@keyup.enter.native和@blur冲突

Uncle_long

于 2019-11-21 17:45:28 发布

阅读量3.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue element js

原文链接：https://www.jianshu.com/p/1d94bb8be9c3

js 同时被 3 个专栏收录

40 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

element

4 篇文章

订阅专栏

本文介绍了解决在使用el-input组件时，由于同时绑定键盘事件和blur事件导致的两次提交问题。通过调整事件绑定逻辑，使用keyup事件触发blur事件，有效避免了重复提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题： el-input框同时绑定键盘事件和blur事件，造成两次提交

Before:

keyup事件触发后，blur同样会被触发，造成两次提交handleInputConfirm方法。

<div class="keyword-content">
    <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm">
    </el-input>
</div>

After:

解决方法：使用keyup事件触发blur事件

<div class="keyword-content">
    <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="$event.target.blur"
            @blur="handleInputConfirm">
    </el-input>
</div>