input使用 blur 事件时频繁触发的问题

最新推荐文章于 2023-12-26 18:35:13 发布
最新推荐文章于 2023-12-26 18:35:13 发布
阅读量2.3k 收藏
点赞数
分类专栏： js blur 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52530833/article/details/112513516
版权

@blur / @change

  • @blur 只要失去焦点就会触发 不管有没有编辑
  • 如果想不实时触发 只要求改变后再触发事件,可以将@blur事件改为@change事件 在触发的时候就会监听input框值是否变化 不变化就不触发!!!

使用blur

  • 事件
    事件
  • 我输入"12" 但是只要不断失去焦点就会不断触发
    只要不断失去焦点就会一直触发
  • 改成change–
    在这里插入图片描述
  • 只有改变值的时候才触发
  • 在这里插入图片描述
Vue 3.2.3 中结合 Element Plus 的 el-input 组件实现账户和验证码绑定功能：失去焦点时判断账户与上次输入不同时重新获取图形验证码 （防抖请求）
专注于计算机研发知识和资讯分享
03-08 361
在账户与上次输入不同时重新获取图形验证码的功能
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》018-Vue中的事件类型
热门推荐
时光隧道
11-09 3万+
在构建现代 web 应用时，事件处理是实现用户交互的核心要素之一。Vue 作为一个流行的前端框架，为开发者提供了一系列强大而灵活的事件处理机制。这使得我们能够方便地响应用户的操作，从而提升应用的互动性和用户体验。本篇文章将深入探讨 Vue 中的各种事件类型，包括鼠标事件、键盘事件、表单事件等，以及如何在 Vue 组件中有效地使用它们。我们将分析每种事件类型的特点，并提供实用的示例，帮助你更好地理解如何在 Vue 应用中灵活运用事件。Vue 3 的事件绑定机制：通过@事件名称。
js处理blur事件触发多次
qq_43588993的博客
07-14 937
可以使用一个布尔值来判断 var blur = false; $(ele).blur(function () { if(!blur) { blur = true; //blur操作.... })
input 事件_你不知道的DOM输入事件
weixin_39966376的博客
11-29 851
测试代码简单到吓人，甚至于事件都可以写在一个字符串里，用空格分开，不过我觉得太长了不好看，测试浏览器为Chrome 80。<!DOCTYPE html> 针对输入框，我们知道最常见的两个事件是input和change，change是在回车确认或者输入框失去焦点的时候触发，这估计是大多数人所知道的关于输入的事件了。下面我们再深入挖掘一下在DOM里跟输入有关的事件。事件概览跟输入有关的事件...
2个input都绑定了blur触发弹窗事件，导致死循环
rqk0324的博客
10-21 563
解决办法，在2个input来回切换 不触发弹窗，通过 document.activeElement 判断当前激活的元素是input。
关于在element-ui中同时使用el-input的@blur和@keyup.native.enter事件时所产生的二次函数调用问题
Scorpio_sky的博客
12-26 1342
在项目中使用el-input，输入内容完成后，失去焦点@blur()或按下回车后@keyup.native.enter即调用函数，此。回车键事件不调用函数，而是直接触发blur事件，这样函数只会被执行一次。，也就是说使用回车键@keyup.native.enter事件的话，只是blur事件还好，toLook函数只被触发一次。，导致函数被执行了两次。
uniapp @input触发事件问题
apanpan8126的博客
07-22 3988
@input一般会触发两次 一次为空 一次为值 今天遇到一个奇怪的事情 接口是没问题的，装载数据的属性出现了问题 两次请求的数据进行了累加， 而不是清空前一次的数据 再进行重新赋值 解决方法： 截断 //模糊搜索方法 getseacher(e) { this.contractList = []; this.page = 1 this.status2 = 'loadmore' let object = { page: this.page, ord
el_input事件blur用法
最新发布
04-02
在 Element UI 的 `el-input` 组件中，`blur` 事件是**当输入框失去焦点时触发**的常用事件。以下是具体用法和注意事项： --- ### 一、基础用法 #### 1. 直接绑定 `@blur` 事件 ```html <el-input v-model=...
微信小程序Input组件聚焦问题兼容
踩坑之路
07-16 4788
微信小程序Input组件聚焦问题兼容 前言 最近小程序做得很频繁，无论是原生的还是使用跨端框架。然后一直以来都被小程序的Input组件搞得死去活来，最近在搞的小程序普遍都有表单，其中的Input清除内容以及聚焦弹起键盘的兼容坑得我死去活来，小程序的Input组件我愿称其为最坑组件，没有之一。 需求 先说一下要实现的需求，就是实现一个Input框的清除按钮，要求清除Input框内容并且在清除内容后自动弹起键盘，要求清除按钮只有在输入框聚焦且内容不为空时显示。需求很容易理解，且我一开始以为很简单。。。 实现过程
input的光标移开事件
01-22
当用户从 `<input>` 元素上移开焦点时会触发 `blur` 事件。此事件不会冒泡，意味着它仅影响目标元素本身而不传播到父节点。 在实际开发中，有时需要处理 `blur` 和其他鼠标点击事件之间的顺序问题。例如，在某些...
input 每输入一次都会失去焦点需要再次点击才能输入
improvement
08-17 4468
input 每输入一次都会失去焦点需要再次点击才能输入 1.情况描述，就是一个input框输入之后就会自动失去焦点，我需要再次点击获取焦点之后才可以进行下一次输入，并且还是只能输入一次就立马又失去焦点，当然这个input框是循环出来的，具体代码如下： <div class="input-area" v-for="item in inviteeInfoList" :key="item.phone" >
input中的 oninput和@blur事件
小破孩的博客
12-03 1364
oninput事件： <el-input v-model="form.peacetime" minLength="1" maxlength="8" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入"></el-input> oninput="value=value.replace(/[^\d.]/g,'')" 此方法验证了输入框只能输入数字并且大于0 @blur事件 <el-input v-m.
解决使用失去焦点blur事件时一直触发事件
LoveMyLife
09-05 5605
今天在调试页面时发现一种怪事，打开调试页面，光标移入input中，这时切换页面，过一会再次进入调试页面时，发现弹窗循环出现，经发现是blur事件一直触发，不知为何，解决办法：和change事件一起使用。 $('form').delegate('.input_email','change',function(){ $(this).one('blur',function(){ ...
blur事件连续触发解决办法
June的专栏
06-18 5934
项目背景：修改程序bug；高度和宽度输入框，进行长度校验，长度不符合进警告提示 blur事件方法里不能含有提示信息，否则高度输入完之后，直接输入宽度，会出现多个提示框； 对于这种情景，blur事件改为change事件，触发是建立在输入框中的文字产生变化，并且焦点从该输入框离开的时候才触发 解决办法：改为change事件 ...
vue中filed和input结合实现@blur和@focus事件
adoreen的博客
09-18 4226
项目开发中遇到了一个问题，需要在外观是filed的情况下进行@blur和@focus事件的实现，如下： 然而问题在于只有input可以使用blur和focus，如何解决这个问题呢？ 我采用了field和input结合的方式。 <field for="input" label="身份证号"> <input id="input" class="moneynum"...
js或jq动态创建标签，绑定的blur、click、hover等事件失效完美解决方案
yycc的博客
08-18 1318
标签： <div class="inBox"> <input class="nr" type="text"> </div> <span class="jia">添加标签</span> 绑定事件： //动态创建一些.nr $('.jia').click(function () { $(this).siblings('.inBox').append('<input class="nr" type="text">') }) //这
blur失焦方法会触发两次_iOS 14引入有趣的Back Tap功能 背部轻拍可触发相关动作...
weixin_39968995的博客
11-12 175
在 iOS 14 中，引入了一项发布会上没有提到的有趣功能——Back Tap背部轻拍。当在手机背部轻拍的时候，该动作可用于触发各种功能，例如打开任务管理、控制功能、以及可访问性功能，比如启用放大镜或 VoiceOver、创建手势、甚至启动快捷方式。比如连拍两次让 HomePod 播放列表中的音乐，或轻击三次来启动相机应用。在昨天发布的iOS 14 beta 测试版中，已经可以启用该功能...
jquery的blur事件里面的focus和alert组合后无限弹出的解决方案
GengJL
10-30 1005
原文链接：https://blog.csdn.net/qq...
Input输入内容自动失焦问题
Hellen90912的博客
10-11 1187
‘on-change’:(event)=>{ Params.row.value = event; This.table[params.index] = Params.row }
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值