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

IE中输入框绑定input事件触发解析(input事件初始化自动执行问题解决)在React项目中碰到了个问题,输入框绑定了input事件,在IE中初始化会自动执行,刚开始以为是只要有placeholder就会导致问题,后面网上搜了一轮,自己手撸了一下,总结了导致绑定的input事件自动执行的原因1.输入框的值为空,2.placeholder改变(注意这个改变的就算前后的placeholder值一样也算改变;还有就是input获得焦点时和失去焦点时,也会改变;但是改变前后…

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

在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);
    })
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137849.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • android root 缺少busybox,手机安装不了Busybox已经root安装后显示让更换路径..「建议收藏」

    android root 缺少busybox,手机安装不了Busybox已经root安装后显示让更换路径..「建议收藏」为Android加入busybox工具可以通过两种方式进入Android的console:1.直接执行命令emulator-shell;2.在启动emulator后,通过命令adbshell进入。之后就可以使用一些linux下常用的命令了,如ls,cat等。然而Android自带的toolbox(位于/system/bin中)也太简略了点,有些命令如find,Android并不支持或者支持…

  • 页面跳转的两种方式(转发和重定向)区别及应用场景分析「建议收藏」

    页面跳转的两种方式(转发和重定向)区别及应用场景分析「建议收藏」转发和重定向区别详解作为一名程序员,特别是javaweb开发的程序员,在使用servlet/jsp的时候,我们必须要知道实现页面跳转的两种方式的区别和联系:即转发和重定向的区别。1、RequestDispatcher.forward方法只能将请求转发给同一个WEB应用中的组件;而HttpServletResponse.sendRedirect方法不仅可以重定…

  • OpenCV-Python实战(1)——OpenCV简介与图像处理基础

    OpenCV-Python实战(1)——OpenCV简介与图像处理基础OpenCV是一个的跨平台计算机视觉库,可以运行在Linux、Windows和MacOS操作系统上。它轻量级而且高效——由一系列C函数和少量C++类构成,同时也提供了Python接口,实现了图像处理和计算机视觉方面的很多通用算法。在本文中,将介绍OpenCV库,包括它的主要模块和典型应用场景,同时使用OpenCV-Python实战讲解图像处理基础要点。

  • 联想st510开卡软件_无力吐槽的一单联想ST510固态硬盘数据恢复

    联想st510开卡软件_无力吐槽的一单联想ST510固态硬盘数据恢复接苏州IT服务商客户送修一块联想ST510固态硬盘需要恢复数据,故障现象为SSD可以正常识别,而且识别的速度也是很快的!,我们接上PC3000访问第一扇区显示代码是错误的,然后读取其它扇区就BSY状态了,必须从新断电加电才可以读取!(从经验判断这块SSD的主控应该是SM2258XT或SM2256K,PC3000SSD加载恢复的速度正常是8M每秒左右)由于这块硬盘转手次数太多(起码转了4手)也没…

  • Fedora 12 环境搭建[通俗易懂]

    Fedora 12 环境搭建[通俗易懂]又来折腾发行版了。这一回是Fedora12,搞的挺艰难的下载了Fedora-12-i386-DVD.iso,无论使用ultraiso还是dd都无法安装。后来下载了一个ImageWriter.exe(o

  • 什么是同构(无向完全图有几种非同构的圈)

    http://162.105.81.212/JudgeOnline/problem?id=2040  
    题意给定两个有向图,找出其同构的对应点,并输出其对应的序列。。。
     
    介于该题的点数<=25 个 直接dfs搜索就可以解决问题,但是剪掉还是必要的;
    1,对于在途中的出度 和入读都唯一的点,那么就可以直接的判断其对应关系,
    2, 对于当前点u,他与已经确定对应关系的点 i 的关系 必须和正准备和u匹配的点v和 点

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号