blur事件连续触发解决办法

最新推荐文章于 2024-02-14 22:14:59 发布
最新推荐文章于 2024-02-14 22:14:59 发布
阅读量5.7k 收藏 2
点赞数
分类专栏： 成长路程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012157999/article/details/92762158
版权

项目背景：修改程序bug；高度和宽度输入框，进行长度校验，长度不符合进警告提示

blur事件方法里不能含有提示信息，否则高度输入完之后，直接输入宽度，会出现多个提示框；

对于这种情景，blur事件改为change事件，触发是建立在输入框中的文字产生变化，并且焦点从该输入框离开的时候才触发

解决办法：改为change事件

六月的星星
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 表单输入框不支持focus及blur事件的解决方案
01-21
采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例): 1.html引用: v-mtfocus 2.在实例中添加指令 directives: { 'mtfocus' (el, binding, vnode) { let mtinput = el.querySelector('input') mtinput.onfocus = function () { ...//如果要对节点的数据进行更改,且更改要映射到页面上,则更改可在vnode.context上进行,这样,改完之后,改变就会映射到页面 } mtinput.onblur = functi
js处理blur事件触发多次
qq_43588993的博客
07-14 808
可以使用一个布尔值来判断 var blur = false; $(ele).blur(function () { if(!blur) { blur = true; //blur操作.... })
Vue中@change、@input和@blur、@focus的区别及@keyup介绍
最新发布
qq_27480007的博客
02-14 1091
Vue中@change、@input和@blur、@focus的区别及@keyup介绍
Javascript blur与click冲突解决办法
10-20
主要介绍了Javascript blur与click冲突解决办法的相关资料,在开发过程中经常会遇到blur与click 冲突的情况，这里举了几个例子，和解决办法，需要的朋友可以参考下
jQuery focus和blur事件的应用详解
12-10
一、需求原因在填写表单时需要实现如下效果二、具体实现 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTDHTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><html><head><meta http-equiv=”Content-Type”content=”text/html; charset=UTF-8″><title>鼠标点击后无文字，挪开鼠标后有文字</title><script language=”JavaScript”src=”../jQuery/jquery-1.7.1.
Javascript中click与blur事件的顺序详析
10-19
主要给大家介绍了关于Javascript中click与blur事件顺序的相关资料，文中介绍的非常详细，对大家学习或者使用Javascript中的click与blur事件具有一定的参考学习价值，需要的朋友可以下面来一起看看吧。
Onfocur和Onblur重复触发问题解决方案（文本框onblur事件连续触发的问题）
m0_38035006的博客
08-23 5858
html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=edge"> title>Documenttit
extjs 动态调用已经创建的控件时兼容性问题，例如blur事件
傾城如夢
04-30 190
定义的textField: { name: 'nodeName', id:'nodeName', fieldLabel: '节点名称', vtype:'nodeNameIsDuplicate', param:model, ...
事件：onblur()无限触发问题
jh5485857的博客
10-09 1676
事件：onblur()无限触发问题
antd modal组件多次渲染的临时解决办法
weixin_43557605的博客
06-07 1950
解决 antd Modal+Form情况表单多次渲染的问题
bootstrap-table行内编辑内容，解决blur事件多次触发的问题
weixin_43303732的博客
02-16 419
【代码】bootstrap-table行内编辑内容，解决blur事件多次触发的问题。
onblur()无限触发问题
WARGON的博客
07-01 7274
当使用onblur事件时，如果调用alert、prompt，confirm之内的能挂起js执行的代码，可能会导致重复触发onblur事件。这时，可以使用onchange()事件来代替onblur()事件。 Onchange方法：输入框失去焦点并且value改变之后触发。    从上面的定义可以看出触发Onchange方法需要满足两个条件，value值改变并且输入框失去焦点。这样子在ajax执行过程...
如果是extjs的field , 都有 blur , focus 的事件
weixin_30237281的博客
04-26 101
var field = Ext.create("Ext.form.field.Text" , { listeners:{ blur: function(){ //失去焦点事件 } , focus: function(){ //获取焦点 } }}); //如果是通过extjs操作当前页面...
解决使用失去焦点blur事件时一直触发事件
LoveMyLife
09-05 5373
今天在调试页面时发现一种怪事，打开调试页面，光标移入input中，这时切换页面，过一会再次进入调试页面时，发现弹窗循环出现，经发现是blur事件一直触发，不知为何，解决办法：和change事件一起使用。 $('form').delegate('.input_email','change',function(){ $(this).one('blur',function(){ ...
input回车触发事件_多好的交互:enter、blur触发相同事件,为啥enter就走了2次
weixin_39535287的博客
12-01 453
解决2次回调 <el-input v-model="input" placeholder="请输入内容" @keyup.enter.native="getList" @blur="getList" > </el-input>「背景」：想开开心心敲代码，没料到一不小心又写了个bug。。。正常的动作就是：每次blur时，如果值有变更就提给咱后段大佬计算一下，然后重新刷新列表...
jQuery使用blur()方法触发两次的解决方法
asdfgh0077的博客
07-04 414
jQuery使用blur()方法触发两次的解决方法
input使用 blur 事件时频繁触发的问题
qq_52530833的博客
01-12 1994
@blur / @change @blur 只要失去焦点就会触发 不管有没有编辑 如果想不实时触发 只要求改变后再触发事件,可以将@blur事件改为@change事件 在触发的时候就会监听input框值是否变化 不变化就不触发!!! 事件 我输入"12" 但是只要不断失去焦点就会不断触发 改成change– 只有改变值的时候才触发 ...
怎么解决el-input中clearable为true时处理clear事件时blur同时触发
05-31
当 el-input 组件的 clearable 属性为 true 时，点击清空按钮会触发 clear 事件，但同时也会触发 blur 事件，导致一些不必要的问题。为了解决这个问题，可以在 clear 事件处理函数中使用 setTimeout 函数将 blur 事件的触发延迟一段时间，让 clear 事件先执行完毕，如下所示： ```html <el-input v-model="inputValue" clearable @clear="onClear"></el-input> ``` ```javascript methods: { onClear() { setTimeout(() => { // do something else // ... }, 100); } } ``` 在上面的代码中，使用了一个延迟时间为 100 毫秒的 setTimeout 函数来延迟 blur 事件的触发，这样就可以保证 clear 事件先执行完毕，再触发 blur 事件，避免了一些不必要的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值