IE中输入框绑定input事件触发解析(input事件初始化自动执行问题解决)
2023-06-13 09:11:59 时间
大家好,又见面了,我是你们的朋友全栈君。
在React项目中碰到了个问题,输入框绑定了input事件,在IE中初始化会自动执行,刚开始以为是只要有placeholder就会导致问题,后面网上搜了一轮,自己手撸了一下,总结了导致绑定的input事件自动执行的原因
1.输入框的值为空,2.placeholder改变(注意这个改变的就算前后的placeholder值一样也算改变;还有就是input获得焦点时和失去焦点时,也会改变;但是改变前后都设置为空字符串则不算改变)
出现问题的代码如下
var input = document.createElement('input');
input.placeholder = '3333';
let listenCb = function(e){
alert('input执行了');
}
input.addEventListener('input', e=> listenCb(e) );
input.placeholder = '3333';
document.body.appendChild(input);
所以要解决这个问题的核心就在于,绑定完input事件之后,不能有placeholder的变化
我的解决思路是,获得焦点时再去监听input事件,如果input变化时可能涉及到placeholder的变化(react里面会这样),要同时去掉placeholder;失去焦点时就取消监听input事件,同时恢复placeholder(如果获得焦点时有去掉),核心代码如下:
//input是dom节点
let listenCb = function(e){
alert('input执行了');
}
let placeholder = input.placeholder
input.addEventListener('focus', function(e){
e.target.placeholder = ''
setTimeout(function(){
//这个setTimeout也可以不要
input.addEventListener('input',listenCb);
}, 0)
})
input.addEventListener('blur', function(e){
e.target.placeholder = placeholder
input.removeEventListener('input',listenCb);
})
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/137849.html原文链接:https://javaforall.cn
相关文章
- ios-tableView的touchesBegan事件和didSelectRowAtIndexPath方法
- js 事件循环中宏任务和微任务执行顺序
- 【说站】js事件委托如何理解
- 【第十篇】Camunda系列-事件篇-消息事件
- 美团在深圳成立机器人研究院;移动发布物联网操作系统;百度Apollo公布自动驾驶最新进展|每日大事件
- react中的生命周期和事件系统
- 双击事件与单击事件的那些事
- Spring Modulith使用模块和事件组织Spring Boot 3应用
- jQuery自动触发事件trigger使用详解编程语言
- Oracle 等待事件 BFILE get name object 官方解释,作用,如何使用及优化方法
- Oracle 等待事件 parallel recovery coordinator waits for slave cleanup 官方解释,作用,如何使用及优化方法
- Oracle 等待事件 Enqueues:TX,Transaction 官方解释,作用,如何使用及优化方法
- Linux Notify: 实时通知您的 Linux 系统的事件和警报(linuxnotify)
- MSSQL触发器:激活实时数据库变更事件(mssql 触发器 事件)
- MySQL事件自动启动机制简介(mysql 事件启动)
- C#事件的设计与使用深入理解
- .NET图像界面按钮的clicked事件浅谈
- Python中使用PyHook监听鼠标和键盘事件实例