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

最新推荐文章于 2024-05-11 10:35:15 发布

flym_

最新推荐文章于 2024-05-11 10:35:15 发布

阅读量1.9k

点赞数 1

分类专栏：方法文章标签： vue 前端 JavaScript 事件

本文链接：https://blog.csdn.net/u014689760/article/details/98112365

版权

方法专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

flym_

关注关注

1
点赞
踩
2

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

MichelleZhai的博客

11-03

2944

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

前端之Vue：模板语法、指令、Style 和 Class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制

大大的博客

07-17

593

目录一、模板语法插值语法二、指令2.1 文本指令v-html：让HTML渲染成页面v-text：标签内容显示js变量对应的值v-show：显示/隐藏内容v-if：显示/删除内容2.2 事件指令v-on:click 可以缩写成@click2.3 属性指令v-bind:class=’js变量’可以缩写成：:class=’js变量’三、 Style 和 Class数据的绑定下方试验的命令四、条件渲染五、列表渲染1. v-if+v-for+v-else控制购物车商品的显示2. v-for遍历数组(列表)、对

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

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

qq_40544291的博客

03-15

1839

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

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

最新发布

LingHuzh的博客

05-11

377

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

解决Vue @keyup.enter和@blur触发两次

tfzh的学习记录

12-20

5084

@blur="handleEditConfirm(c.type_id, c.description)" @keyup.enter="$event.target.blur"

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

xuexi0754的博客

06-20

992

记录：做一个树结构重命名的功能时点击回车触发事件请求接口重命名时出发了两次，因为两个事件都触发了解决办法：按下回车直接调用焦点事件，就可以了@keyup.enter.native="$event.target.blur()"

vue中 input同时绑定了@blur和@keyup.enter事件，提交两次方法

lifangfang0607的博客

01-22

1557

如图：会出发两次方法解决方法：回车时提交失去焦点就好。如下图：

vue教程常见事件与 vue事件处理

qq_36723759的博客

02-23

1237

事件处理与表单输入绑定事件处理常见js事件绑定监听事件修饰符按键修饰符表单输入绑定事件处理常见js事件 1、窗口事件 onload, html文档加载完成时触发。 #onload html文档加载完成时触发。 window.onload = function(){ //当html文档加载完成之后，执行该回调事件。 } onunload，html页面离开时触发。 #onunload ht...

事件（DOM事件绑定）

Cc200171的博客

05-25

480

DOM0级事件所有的浏览器都支持事件只能注册一次，后边的会覆盖旧的注册：在html上添加 <div onclick = “alert('helllo')”></div> 匿名函数 d.onclick = function() {} this指向自身普通函数 onclick = “ok()” 相对于动态掉用、this指向window、没有事...

vue 简单自动补全的输入框的示例

11-30

`v-model`指令用于双向绑定输入框的值，`@keyup.enter`监听回车键事件触发搜索方法，`@blur`则监听输入框失去焦点（鼠标离开输入框）时执行的模糊（`blur`）方法。 `v-show`指令用于动态控制匹配建议列表的显示与...

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

qq_37899792的博客

04-02

1538

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

多次注册事件会导致一个事件被触发多次

Dean Chen的专栏

08-10

6377

一个JavaScript逻辑，会自动绑定函数到按钮的click事件，但是这段代码会反复注册事件。这样依赖onNext函数会在点击一次按钮的时候多次触发。这是JQuery内部没有判断是否绑定多次，怀疑其内部用了数组保存事件函数，而且没有去重。下面的代码预防了这个问题。解决方案很简单。 if (!this.hasPageBarEvents) { $(".pNext").on("click"

Vue基础3之事件处理

qq_34306228的博客

11-08

3907

事件的基本使用：Vue中的事件修饰符： a标签的页面不会跳转 showTip事件不会触发不使用self时候，点击按钮，会发生冒泡，打印两次，但是event.target还是button事件，所以两次输出的当前操作的元素都是button事件使用self时候，点击按钮，但是由于外层的div当前操作元素是button不是div，所以外层即便冒泡也不会打印输出鼠标滚轮滚动，即便滚动到最底部，也能依旧触发该事件，但是如果是页面滚动条事件的话，到底部之后就再不会触发该事件了。正常运行

vuejs input输入框失去焦点和按下回车键调用同一事件方法

Johnston先森的博客

03-11

1843

// 输入框失去焦点或者按下回车键时调用 leftBlur(item) 方法vue部分代码 <el-form-item :label-position="labelPositon" label-width="180px" prop="leftInput"> <div> <el-input style="width: 12vw;" placeholder="请输入手机号" suffix-icon=...

（划重点）v-model的实现（Vue2和Vue3），change、blur、input事件。

qq554244261的博客

02-19

4787

在学习中了解到，v-model实际上只是一个语法糖。并且Vue3对v-model的逻辑进行了重写。于是决定对Vue2和Vue3中对于v-model的实现进行探究。 v-model中触发的事件 v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件： text 和 textarea 元素使用 value property 和 input 事件； checkbox 和 radio 使用 checked property 和 change 事件； select 字段将 value 作

vue3+elementUI回车键聚焦el-input

ahwangzc的博客

06-15

690

vue3+elementUI回车键聚焦el-input

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

qq_40179700的博客

08-26

2195

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

关于在element-ui中同时使用el-input的@blur和@keyup.native.enter事件时所产生的二次函数调用问题

Scorpio_sky的博客

12-26

1081

在项目中使用el-input，输入内容完成后，失去焦点@blur()或按下回车后@keyup.native.enter即调用函数，此。回车键事件不调用函数，而是直接触发blur事件，这样函数只会被执行一次。，也就是说使用回车键@keyup.native.enter事件的话，只是blur事件还好，toLook函数只被触发一次。，导致函数被执行了两次。

Vue实现div的keyup.enter事件与阿里云软电话SDK集成

在Vue应用中，给div元素绑定keyup的enter事件可能会遇到问题，特别是在直接使用`keyup.enter`这样的组合时可能无效。为了解决这个问题，我们需要采取一种不同的方法来实现键盘Enter键的响应。以下是一种常见的解决...