vue中@blur和@keyup.enter同时使用会重复触发的问题

谢先生丶nsyw

已于 2022-06-20 14:08:11 修改

阅读量1k

点赞数 6

文章标签： vue.js javascript ecmascript

于 2022-06-20 11:36:06 首次发布

本文链接：https://blog.csdn.net/xuexi0754/article/details/125369142

版权

记录：

做一个树结构重命名的功能时

点击回车触发事件请求接口重命名时出发了两次，因为两个事件都触发了

解决办法：

回车时直接调用焦点事件，就可以了

@keyup.enter.native="$event.target.blur()"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

谢先生丶nsyw

关注关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue 输入框组件 @input、@keyup.enter、@change、@blur

且听风吟的博客

02-16

3717

input input 事件结合了 keyup事件和 change事件，会在keyup时判断值是否发生变化，变化了则触发该事件。 input 一般用于实时监听事件，只要输入的值变化了就会触发input。 keyup.enter keyup.enter事件是在pc上点击回车键触发，在手机上是需要点击输入键盘上的确定键触发。 click @click 与enter事件相似，在手机上都是要经过触发的虚拟键盘才会触发事件，一般用于触发事件。 blur blur(失焦)是输入框在输入完成、失去焦点，移到其他地方触发

结合 element-ui做一个标签管理，keyup.enter 和 blur 同时存在时，触发两次

湾湾叉会儿腰的博客

09-30

721

element-ui 有一个动态编辑标签，可以删除和添加。但这样是不满足我的需求，我们想弄成和微博标签一样。大概就是：下面有一个总的标签库，上面是我选择的标签，标签库可以编辑，添加，删除标签，点击总标签的标签，会变成自己选择的标签。自己选择的标签只能删除。目前我实现的效果是这样子的：总的标签库代码如下：  <el-input class="input-new-tag" v-if="inputVisible"

3 条评论您还未登录，请先登录后发表或查看评论

解决vue keyup.enter与失去焦点事件绑定相同函数会触发两次的问题

qq_46448507的博客

06-09

1682

问题分析：按下键盘也会触发失去焦点事件，所以会触发两次解决办法 @keyup.enter.native="$event.target.blur" @blur="handleInputConfirm() 让键盘事件指向鼠标失去焦点，通过$event.target.biur ...

vue 项目中，enter 键提交触发两次的原因及解决方法

qq_46034942的博客

01-31

2015

enter 事件发生的时候同样失去了焦点，所以会触发 blur 事件。看看你的 blur 事件是不是和enter 事件是同一个方法。如果你要是想着说定义两个方法，若他们的操作是一样的，根本解决不了问题，依旧会执行两个方法名不同的两个函数体，最简单的解决方法如下

vue输入框 enter_多好的交互：enter、blur触发相同事件，为啥enter就走了2次

weixin_39543478的博客

01-26

352

解决2次回调「背景」：想开开心心敲代码，没料到一不小心又写了个bug。。。正常的动作就是：每次blur时，如果值有变更就提给咱后段大佬计算一下，然后重新刷新列表。不过输入框多了，摸鼠标的次数就多了，咱用户就变得莫名烦躁了、、、加个回车提交吧！！！然后上面的bug应用而生呀～每次回车都会提交2次请求，被敏锐的大佬给发现了，，，别说我开始还真没注意，不过很快意识到还真是的。「原因」：每次enter的时...

Vue input输入框同时绑定blur和回车事件，且两个事件相同，按下回车会触发两次事件的解决办法

qq_44573359的博客

07-06

3145

由于回车动作会使input失去焦点，从而触发blur事件，所以会触发两次事件。

解决VUE keyup.enter和blur绑定同一事件，触发两次的问题

flym_的博客

08-01

1995

<el-input ref="editTagFoucus" size="mini" @keyup.enter.native="$event.target.blur" @blur="editCompleteTag(items)" v-model='items.name'></el-input>

基于Element UI 封装的Vue可编辑div输入组件，可实现@人员和发送剪切板文件

weixin_45058982的博客

12-30

1665

文章目录设计背景使用效果代码实现template模板可编辑div及@部分script部分style部分浏览器兼容性设计背景最近客户提出要在输入框中实现类似微信@人和发送截图功能，于是考虑到使用可编辑div来代替input输入框使用效果先上图，看效果发送截图功能暂不展示，可参考实现代码实现 template模板可编辑div及@部分 <div> <div id="atInputComponents"> <div ref="editD

VUE 记事本笔记

m0_73495603的博客

09-26

723

记事本笔记

VUE扫码枪中文输入法兼容自动回车事件(上)

MichelleZhai的博客

11-03

3166

vue框架下面的扫码枪，针对windows+搜狗中文输入法兼容性问题处理方案

vue 元素上同时绑定了keyup.enter和blur事件，会触发两次的解决方案

最新发布

LingHuzh的博客

05-11

454

在vue中自定义组件上同时绑定了keyup和blur事件，用于完成input输入，但blur后触发一次事件，按下enter却触发两次；：按下enter也算是失焦了，所以会先执行keyup.enter，再执行blur，这样就造成了方法执行了两次。

解决前端vue项目问题：element避免二次触发的回车来刷新页面

意初的博客

09-09

1143

回车时element会二次触发不必要的回车刷新页面，需要加阻止事件即可。

点击按钮失焦，导致触发两次

m0_62323931的博客

12-06

321

场景：在业务中经常会遇到，我们给输入框绑定了失去焦点调用查询接口，然后也给按钮绑定了点击调用查询接口。这个时候会出现一个bug，那就是当输入框通过点击查询按钮失去焦点，那么就会导致查询接口调用两次，那如何避免这个问题？这里，我们将@click事件改为 mousedown 事件，并阻止默认事件，这样就可以避免两次调用接口，并且能保证单独的失去焦点调用或点击调用不受影响。注意：这里是用vue3举例，js可以在 mousedown 事件中event.preventDefault()阻止默认事件发生。

@keyup.enter和blur发生冲突解决办法（回车键和失去焦点发生冲突时解决办法）

qq_37764320的博客

03-15

1407

问题描述：当回车时触发保存的同时，input也会失去焦点，同时触发保存函数。问题解决：回车时不再调用函数，而是直接调用失去焦点实例：修改前： <input class="edit" :value="item.content" @blur="finishEdit(item,$event)" @keyup.enter="finishEdit(item,$event)"

【enter 和 blur 事件冲突】的问题以及【当点击编辑按钮时，输入框自动聚焦】的方法

qq_37899792的博客

04-02

1559

场景：input输入框enter事件和blur事件要实现相同效果，所以绑定了同一函数问题：按下回车时往往又会同时触发 blur 事件，按下回车的时候，这个函数其实调用了两次解决： @keyup.enter.native="$event.target.blur" @blur="blurSeq(scope.$index,scope.row[item...

解决vue中keyup事件和blur重复调用，触发不同方法

qq_40179700的博客

08-26

2231

回车时移除失焦事件，聚焦时绑定失焦事件

Vue element 分页输入框回车跳转请求两次的问题

f351873170的博客

03-15

1093

目录我的问题我的代码发现问题解决方案验证方案总结由于后台的懒惰，前端就要受罪。我的问题问题出现要求：总页数要大于1000条；跳页使用回车后台传入的分页数据不是从1开始的，而是从0开始的，所以前端这边就要对后台的分页做大量的数据处理。我的问题也是处理这部分导致的前端代码在接收分页数据时，我的处理是对接收的index+1，直接赋值给分页的current-page；前端代码在前往中输入页码进行跳页时，我的处理是直接对输入的数据-1，然后直接赋值给请求参数，再进行请求；在前往输入较大页码时

Vue03---事件绑定和表单绑定

m0_37756431的博客

03-10

2693

目录一、事件绑定 1、点击事件两种写法 2、阻止form表单提交的默认事件事件修饰符按键修饰符系统修饰符鼠标按键修饰符二、表单绑定 vue表单绑定修饰符一、事件绑定 1、点击事件两种写法 @click="handleClick" @click="handleClick($event)" $event可以对dom元素进行获取或修改标签的属性 2、阻止form表单提交的默认事件 1.在表单上绑定事件@click="handleClick"，方法中写e

Vue项目element ui 回车多次触发

code__monster的博客

06-08

1706

el-input keyup.enter.native是一个Vue.js指令，用于监听el-input组件上的 "enter "按键事件。实现多次搜索，或者键入值改变等需求，需要利用键盘使用el-input 中的 change 事件只有当value值改变或者不同时才会再次触发，所以可以利用keyup.enter.native。然后用键值符进行改变即可，判断处的 this.searchValue 为v-model双向绑定值，对应更改为自己的值即可。不论value值是改变与否，只要敲击回车就会调用。

antDesignvue中@keyup.enter

05-25

@keyup.enter 是 Ant Design Vue 框架中的一个事件修饰符，它用于在用户按下回车键时触发事件。比如，你可以在一个文本框中监听 @keyup.enter 事件，当用户在该文本框中按下回车键时，就会触发相应的事件处理函数。...