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

IE浏览器input输入框自动触发input事件和focus也触发input事件的bug 问题 windows系统IE11、10 在页面输入框上同时绑定了nput以及foucs事件,当触发foucs事件的时候会触发input事件,导致我的第一次搜索无效。 暂时解决办法 只有当输入框上存在placeholder的情况下才会出现如此问题,因此项目中如果不是特别依赖placeholder可以将其暂时去掉。另外如果想要实现placeholder效果,可以使用另外的方式实现。 ... 阅读详情

在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);
    })
网页表单自动填写技术:从DOM操作到自动化测试的四种方法详解 表单自动填写是Web自动化领域的基础技术,其核心原理是通过程序模拟用户操作,向网页表单元素填充预设内容。从技术实现层面看,关键在于理解DOM操作与事件驱动机制:直接修改元素的value属性虽能改变显示状态,但可能绕过页面的事件监听逻辑,导致实时校验、联动更新等功能失效。为解决此问题,需要结合事件触发机制,通过dispatchEvent方法模拟input、change等原生事件,从而确保页面状态同步更新。这项技术的工程价值在于显著提升开发测试效率和数据处理准确性,广泛应用于自动化测试、数据采集、日常办公等场景 阅读详情

相关推荐

Unity Input System实现3D交互:单指旋转与双指缩放全解析

在Unity开发中,输入管理是构建交互应用的基础。传统的输入处理方式如直接调用Input API,虽然直接但代码耦合度高、难以维护和跨平台扩展。Unity Input System作为一套现代化的输入管理系统,其核心原理在于将“输入动作”与具体“输入设备”解耦,通过定义抽象的动作(如旋转、缩放)并绑定到不同控件(鼠标、触摸屏、手柄),由系统自动处理底层差异。这一设计的技术价值在于提供了清晰、模块化的代码结构,并实现了真正的多平台输入支持。在3D查看器、模型展示、地图导航等应用场景中,单指旋转与双指缩放是最基

weixin_34199335的博客 288

form表单重置时,让某一个input值不变

想让表单重置时某一个input值保持不变,只要给reset按钮添加一个点击事件,在执行 reset() 方法之前修改它的 defaultValue 属性,将它当前的值设为初始值就可以了。 <input type="text" id="mcName" name="mcName" class="layui-input mcName" lay-verify="" readonly> ...

sunshine_xtt的博客 2462

Vue 组件开发 - 数据输入框组件

目录设计通用组件的一般思路组件效果1. HTML结构2. index.js3. input-number.js3.1 input-number.js代码注解 设计通用组件的一般思路 明确需求; 设计API(组件的API:只来自props、events 和 slots); 2.1 确定命名、规则 2.2 编写业务逻辑 即使逻辑的第一版没做好,后续还可迭代完善;但如果 API 没设计好,后续修改成本很高。 组件效果 1. HTML结构 由于本示例以交互功能为主,CSS美化样式简单处:

←か淡定☆ ヾ 的博客 617

浏览器自动填入密码触发哪个事件

登录的时候,选择了浏览器记住密码,然后补全用户名,浏览器会自动帮你填入密码,此时触发的是密码输入框的 onchange 事件。

热爱思考、活力满满、开朗爱笑的年轻人 2591

MaxKey+JeecgBoot单点登录实战:手把手教你从零配置到账户同步

本文提供MaxKey与JeecgBoot单点登录(SSO)的实战整合指南。详细讲解从MaxKey应用注册、JeecgBoot前后端改造,到最终实现账户同步的完整步骤,重点解决Shiro配置、令牌交换等关键问题,帮助企业构建统一、可扩展的身份管理体系。

weixin_29258297的博客 541

Matlab实战:5分钟搞定脉冲多普勒雷达信号处理仿真(附完整代码)

本文详细介绍了如何使用Matlab在5分钟内完成脉冲多普勒雷达信号处理仿真,包括环境配置、线性调频信号生成、数字下变频处理、动目标检测及性能优化技巧。通过完整代码示例和实用技巧,帮助工程师快速验证算法可行性,提升雷达信号处理效率。

nokia的博客 944

IE事件 动态预览输入框内容

作者:zccst 这种解决办法已在IE7,8,9下单独测试成功。 但是放在项目里还有错。 [code="html"] 测试标题 $(function(){ console.log($("#out").find("input.a,input.b")); $("#out").on("input","input", han

zccst的专栏 190

PCIe学习笔记(一)-------1.3 PCIe数据包(TLP,DLLP,PLP)

1,PCIe的层次结构 PICe设备在硬件电路上可以分为三个层次结构:事务层(Transaction Layer)、数据链路层(Data Link Layer)、物理层(Physical)。每一个层次又可以分为两个部分,分别为处理发送和处理接收的部分。 也可以分为四个层次,将事务层以上的层次称为软件层(Software Layer)。 2,PCIe数据包 前面已经说过PCIe之间是以数据包的形式来传输数据的,协议共定义了3类数据包。与处理层相关的是处理层数据包(TLP),与数据链路层相关的是数据

llxxyy507的博客 2万+

不以0开头的数字输入框

  在做Web开发的时候,经常需要让一个text框只能输入数字,而数字又不能以0开头。上网查了很多,却始终找不到我所需要的,无奈之下自己写一个吧。代码如下: [code="html"][/code] 代码分析: 1、onKeyUp 就是键盘松开后调用的事件。 2、/\D/g 这个就是我这里用的正则表达式。头尾的/符号表示这里面包的是正则表达式;最后一个g表示全文搜索;\D是[^0-9]...

chenfengcn的专栏 1020

应用处理器(AP)、系统级芯片(SoC)与微控制器(MCU)的区别与联系

应用处理器(AP)、系统级芯片(SoC)与微控制器(MCU)的区别与联系

a_zxswer的博客 1691

linux虚拟机和电脑ping通(可上网)

linux虚拟机(Ubuntu)和电脑ping通。

观则明的博客 4117

只解决ie11中input事件初始化自动执行的问题

问题:只解决input事件初始化自动执行的问题,window10系统,自带ie11版本,用的input事件,实时监听input输入情况 思路: 1、通过对input框的placehodler的处理,增加input事件里的代码执行的一个判断条件; 2、原来是判断的input框为空显示全部,导致初始化后,如果选中了部分,但是几秒后就又显示了全部内容,因为自动执行了input事件里的代码; 3、...

weixin_36706903的博客 2805

芯片原厂linux驱动开发的分享

大家好,我是XX,来自湖南XX学院,电子信息18级,也曾在创新基地控制组学习过两三年,毕业后就职于一家芯片原厂的解决方案部,担任驱动工程师的职位,算上实习期,我的工作时长已有两年。在此我想将这两年期间学习与积累到的一些经验输出出来,与大家一同分享。知识面有限,只能简单介绍一些驱动开发方向的一些经验,且由于经验尚浅,文中难免会有一些疏漏和错误之处,还请大家积极地批评指正。

嵌入式技术开发 848

解决IE下input事件初始化自动执行的问题

jQuery的on("input")事件在IE下刷新页面时会自动执行,解决办法是在外层加一个focus事件 <html> <head></head> <body> <input id="test" /> </body> <script> $(document).ready(function...

qq_36485978的博客 1144

“华为杯“第十四届中国研究生数学建模竞赛-E题:多波次导弹发射中的规划问题(续)(附MATLAB代码实现)

将最长暴露时间的发射装置按照“优先隐蔽于转载地”,即增加该种发射装置的隐蔽时长,从而达到缩短最长暴露时间的目的。8.2 模型建立。

getusushu的博客 298

使用R语言实现循环神经网络RNN进行文本生成

首先,让我们回顾一下循环神经网络(Recurrent Neural Networks,RNN)的基本概念。RNN是一种深度学习技术,特别适合处理序列数据,如时间序列和文本数据。RNN的关键特性是它的隐藏状态,这个状态可以捕捉到当前输入之前的信息。这使得RNN能够利用前面的信息来影响后续的输出,从而对序列数据进行有效的处理。

斌擎科技 724

动态改变Input和Textarea值Vue数据没有绑定的解决办法

背景: 我在循环里面的input框需要限制输入的值的类型,如果我绑定了change的方法的话 首先需要失去焦点才能生效,如果不失去焦点直接点击确定按钮是不能触发事件的 值还是原来的 ,第二个如果层级多的话需要把索引什么的传过去用$set修改,终究是不方便所以在了input框的原生onkeyup事件中 但是问题来了 onkeyup事件中的值并没有跟vue的数据进行绑定 在0后面输入了2变成了02 onkeyup事件中的逻辑处理成了2 但是当点击提交的时候发现值还是02 解决办法 onkeyup

jerryyang_2017的博客 1743

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

angular监听输入框值的变化_angular 实时监听input框value值的变化触发函数方法

angular 实时监听input框value值的变化触发函数方法用angulajs + ionic 做了一个登陆页面。效果要通过监听输入框的变化来判断登陆按钮是否可点击。当至少一个输入框为空时登录按钮不可点击。一开始是用的jquery的方法做的,后来发现刷新当前页可以实现效果,但是当经过路由跳转后再回到登陆页后,方法就被执行了。后来经过查找资料,利用angular.js的$watch方法解决了。...

weixin_39934869的博客 1909

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

html5触发文本框change事件,html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchang...

关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="select();"。做购物车页面时会要用到。input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange:1、onchange...

weixin_31058323的博客 1212

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

Layui上传文件时choose事件只触发一次的问题(两种解决方案+最终解决方案源码)

问题描述:使用layui的组件实现的文件列表添加和上传,第一次弹出此页面,可添加多个文件,点击上传,可以成功上传,但再次弹出此页面时,添加文件无法触发choose方法,上传依然是正常的,话不多说,看解决方法。 说明:我不是前端开发工程师,所以在博客上寻找解决方法,最终成功解决,感谢大家的分享。 1.使用uploadListIns.config.elem.next()[0].value = ‘’ 说实话我不知道这个方法的底层是怎么样的,但是这种方案在我的页面里是失效的。 initUploadList: f

Java与大数据相关实践内容分享! 3195

3步解决Layui下拉框与输入框联动难题

你是否曾在使用Layui开发表单时,遇到下拉菜单选择后输入框未能实时同步数据的问题?或者输入关键词时下拉选项无法动态过滤?本文将通过实际案例,教你用3个步骤轻松实现下拉菜单(Dropdown)与输入框(Input)的完美联动,提升表单交互体验。 ## 问题场景分析 在后台管理系统开发中,我们经常需要实现"输入框+下拉菜单"的组合交互,例如: - 搜索框输入关键词时,下拉菜单实时显示匹配结果 -...

gitblog_00596的博客 442

Gooey事件处理:生命周期事件和UI控制的深度解析

Gooey是一个强大的Python库,能够将命令行程序轻松转换为完整的GUI应用程序。作为Gooey框架的核心组成部分,事件处理机制负责协调应用程序的生命周期和用户界面交互。本文将深入探讨Gooey的事件系统、生命周期管理以及UI控制机制。 ## Gooey事件系统架构 Gooey采用基于发布-订阅模式的事件系统,通过[gooey/gui/pubsub.py](https://link.git

gitblog_00155的博客 786

深入浅出JS事件:从基础原理到实战进阶全解析

本文从事件的核心概念出发,逐步深入讲解了事件流、事件绑定方式、事件委托、防抖节流等关键知识点,并结合实战案例和避坑指南,帮你全面掌握JS事件开发。核心要点回顾:事件流分为捕获、目标、冒泡三个阶段,可通过`stopPropagation`阻止冒泡三种事件绑定方式各有优劣,DOM2级(`addEventListener`)是现代开发的首选事件委托利用冒泡机制,实现高效的批量元素事件处理,支持动态元素防抖和节流是解决高频事件性能问题的核心方案,需根据场景选择使用。

A2420734930的博客 635

window.event.srcElement与window.event.target 触发事件的元素 触发事件对象的获取,window.event与时间函数参数的event是同一个 事件对象

判断事件触发的元素: var tag = window.event.target || window.event.srcElement; if (tag.tagName.toLowerCase() == "input") { return; } window.event.srcElement与window.event.target 都是指向触发事件的元素,它是什么就有什么样的属性 srcElement是事件初始化目标html元素对象引用,因为事件通过元素层次冒泡,可以在...

xiaozhen0610的博客 483

input子系统

1. Linux中input子系统介绍 input驱动程序是Linux输入设备的驱动程序,分成游戏杆(joystick)、鼠标(mouse和mice)、键盘(keyboard)、事件设备(event)。其中事件设备驱动程序是目前通用的驱动程序,可支持键盘、鼠标、触摸屏等多种输入设备。 事件设备驱动程序(event)是通用的,可以包括所有类型的输入设备,也是目前的主流。 Linux input子系统将一个输入设备的输入过程分成了设备驱动(input device driver)和事件驱动(inp

四季帆的博客 1596

深入解析jQuery事件系统:三层架构、事件委托与实战技巧

DOM事件处理是前端开发的核心基础,它实现了用户交互与页面响应的桥梁。其原理基于事件冒泡与捕获机制,通过监听用户操作触发相应函数执行。这一技术价值在于解耦用户行为与业务逻辑,提升代码可维护性。在应用场景上,无论是传统网站还是现代Web应用,高效的事件管理都至关重要。本文聚焦于jQuery事件系统,它作为一套经典的跨浏览器兼容解决方案,通过统一事件对象、高效的事件存储分发机制和简洁的API层,封装了原生事件的复杂性。其中,事件委托机制能显著优化动态内容交互与性能,而命名空间和自定义事件则为模块化开发提供了便利

weixin_34007020的博客 428
上一篇: CSS3 transform对普通元素z-index、positon和overflow的影响,
下一篇: React 阻止事件冒泡失效、stopPropagation和stopImmediatePropagation分析,解决stopPropagation没有阻止冒泡问题
Qssn丶
博客等级 码龄11年 88粉丝 113原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值