IE中输入框绑定input事件触发解析（input事件初始化自动执行问题解决）

全栈程序员站长

发布于 2022-09-05 19:28:49

2.4K0

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

在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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年6月1，如有侵权请联系 cloudcommunity@tencent.com 删除

css