IE浏览器input输入框自动触发input事件和focus也触发input事件的bug

最新推荐文章于 2023-08-19 14:41:36 发布
最新推荐文章于 2023-08-19 14:41:36 发布
阅读量2.1k 收藏 5
点赞数 1
分类专栏： ie 兼容 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44183178/article/details/107713690
版权

问题

windows系统IE11、10 在页面输入框上同时绑定了nput以及foucs事件，
加载完成后会自动触发input事件，当触发foucs事件的时候会触发input事件，导致我的第一次搜索或其他事件无效。

①暂时解决办法

只有当输入框上存在placeholder的情况下才会出现如此问题，因此项目中如果不是特别依赖placeholder可以将其暂时去掉。另外如果想要实现placeholder效果，可以使用另外的方式实现。

②解决办法

在ie上用keyup事件代替input事件
  // ie的input首先自动触发，focus也会触发，给ie注册keyup键盘弹起事件代替input事件
  // 判断ie浏览器
    if (!!window.ActiveXObject ||
最低0.47元/天 解锁文章
Johnny_yellowboy
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jquery实现input输入框实时输入触发事件代码
10-26
如何实现input输入框实时输入触发事件，下面有个不不错的示例使用jquery实现的，感兴趣的朋友可以参考下
IE中输入框绑定input事件触发解析（input事件初始化自动执行问题解决）
qssn的博客
08-02 2655
在React项目中碰到了个问题，输入框绑定了input事件，在IE中初始化会自动执行，刚开始以为是只要有placeholder就会导致问题，后面网上搜了一轮，自己手撸了一下，总结了导致绑定的input事件自动执行的原因 1.输入框的值为空，2.placeholder改变(注意这个改变的就算前后的placeholder值一样也算改变；还有就是input获得焦点时和失去焦点时，也会改变；但是改变前后...
只解决ie11中input事件初始化自动执行的问题
weixin_36706903的博客
03-20 2690
问题：只解决input事件初始化自动执行的问题，window10系统，自带ie11版本，用的input事件，实时监听input输入情况 思路： 1、通过对input框的placehodler的处理，增加input事件里的代码执行的一个判断条件； 2、原来是判断的input框为空显示全部，导致初始化后，如果选中了部分，但是几秒后就又显示了全部内容，因为自动执行了input事件里的代码； 3、...
JavaScript-----键盘事件
weixin_45904557的博客
06-13 1164
onkeyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按下时触发 onkeypress 某个键盘按键被按下时触发惇但是它不识别功能键比如ctrl shift箭头等
几种常见键盘按键事件JS,DOM
最新发布
weixin_65419993的博客
08-19 120
几种常见键盘按键事件JS,DOM
input 内容改变的触发事件
MaQuanXin的博客
06-28 1220
input 内容改变的触发事件 onchange onchange 事件会在域的内容改变时触发。支持的标签, , ,。 注意：在元素的值改变了且失去焦点时触发（两次的值一样不会触发）。 缺陷：通过js代码改变DOM的值不会触发，解决在js代码里改值了调用其change 的function() 或者调.change()方法。 JS： <input type="text" id="cc" o...
输入框input获得焦点后自动选中内容
x_jinshan2016的博客
09-03 2598
项目开发中经常会遇到输入框inpute获得焦点后自动选中内容，可以通过foucus实现 //input中绑定foucus方法 <input @focus=" focus($event)" /> //得到焦点选中 focus:function( event) { event.currentTarget. select() } ...
input 框自动填充信息
会飞的咕咕鱼的博客
05-23 1602
给input框添加autocomplete=“off” 如果值为off还不行，那就给它设置成任意字符串(除‘on’和‘off’之外的)。 autocomplete属性值有2个： on:启用自动完成功能 off:禁用自动完成功能 属性值为任意字符串：为了某个特定的输入而预设几个值来实现“自动完成”，例如：autocomplete=“my-password” ...
input标签内容改变的触发事件介绍
09-04
这是一个IE浏览器特有的事件，当`input`标签的任何属性发生改变时，它都会实时触发，包括但不限于`value`属性的改变。每次用户输入或删除一个字符，或者通过JavaScript改变`value`，`onpropertychange`事件都会被...
Vue触发input选取文件点击事件操作
10-14
总的来说，Vue.js中的文件上传操作可以通过监听按钮点击事件触发input元素的文件选择对话框，然后通过`FileReader`处理选中的文件。同时，Vue的懒加载机制可以提高大型应用的性能，确保用户只加载他们需要的模块。
解决动态添加input无法获取焦点事件
baidu_38027860的博客
03-19 8699
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;例子&lt;/title&gt;    &lt;meta name="viewport" content="initial-scale=1.0, maximum-scal
html点击一个input触发另一个input_构建一个简单的 Backbone 应用
weixin_42099858的博客
12-19 450
应用：Service我们并不关心页面的样式和兼容性，需求是选择好菜单项目后，计算出总价页面效果：Serviceindex.html<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>你的第一个 Backbone 应用</...
【Vue】输入框状态切换&自动获取输入框焦点の实现
weixin_45912372的博客
04-10 3586
设置一个0ms的定时器，当浏览器执行到定时器时，会将定时器内部的函数放入延迟队列中，当定时器的等待事件结束后，会将函数放入消息队列的末尾，消息队列的执行按照先进先出原则，当前面的任务执行完成后，浏览器会自动执行。通俗的理解是：等组件的 DOM 更新完成之后，再执行 cb 回调函数。按钮展示输入框，并自动获取对话框焦点，失去焦点时展示。，实现点击按钮展示输入框，给输入框绑定失去焦点事件。时，页面已经根据最新的数据渲染完成了，此时我们执行。，确定输入框的展示状态，默认为。获取到显示的输入框的焦点(
关于Input的自动聚焦
X2014W的博客
01-21 6372
关于Input的自动聚焦 哈喽，小伙伴们，没错，我又来啦！ 这次的分享主要是想记录一下日常。 首先呢，我要写的是一个input的聚焦，相信大家都知道聚焦就是focus（）方法，但是呢我写上去之后呢，foucus（）方法没有起到作用，就是我的输入框时无法自动聚焦的。这是为什么呢，因为我没有打开时就自动聚焦，所以呢，把它放在打开时调用的方法中，就是我们要做的第一步，那么第二步是什么呢，需要给他设置延时，关于怎么设置延时，在其他的文章中有专门的简述过，不知道的小伙伴可以去看看。 好了，记录就到这里了，不知道对小伙
javascript 模拟按键事件 触发输入框oninput事件
谢泽的网络日志
04-24 5920
记录下解决textarea 在js赋值后不生效的问题 我要实现的是网页聊天框模拟输入一段话，然后js触发点击发送事件 然而在使用js直接赋值之后，textarea并没有收到值 document.querySelector('#id').value = 333; 又想到用按键事件触发onkeydown，onkeypress，onkeyup，然而试了半天并没有什么鸟用~ 最后通过事件监听器，从textarea的事件往上级一个个删。 终于！！删到input的时候，手动输入的时候字数不再变化了！ 接下来就.
html点击按钮自动填数字,HTML Input Number defaultValue用法及代码示例
weixin_39578674的博客
06-03 662
HTML DOM中的DOM输入数字defaultValue属性用于设置或返回数字字段的默认值。此属性用于反映HTML值属性。默认值和值之间的主要区别在于，默认值表示默认值，并且在进行一些更改后该值包含当前值。此属性对于查明数字字段是否已更改很有用。用法:它返回defaultValue属性。numberObject.defaultValue它用于设置defaultValue属性。numberObje...
Vue实现点击事件使输入框自动填入数据
Sfh的博客
08-09 2567
最近因为疫情期间，然后朋友上学说每天需要上报体温，能不能实现一个自动填体温的功能，刚好最近在复习vue，所以用vue来简单实现一下： <div id="app"> <label for="temp" @click="auto">温度(单位°C) <input type="text" id="temp" :value="temperature" > </label> </div>
ie10下input框的keyup.enter事件失效
~
05-16 381
自己写的分页组件中跳转到xx页功能，在谷歌浏览器功能正常，在ie下分页并没有跳转， 代码如下：span中包裹的input标签 <span> 跳转到 <input type="text" v-model="pageNum" class="pageInput" @keyup.enter="jumpPage" /> 页 </span&
input输入框的原生事件
m0_56683897的博客
12-09 3530
输入框内容发生变化时触发。(值得注意的是，change事件仅在文本域有效，包括textarea，select)输入框的value值发生变化时就会触发，与change不同，input不用等到失去光标时便会触发。当使用拼音输入法开始输入汉字，文本段落的组成完成或取消时触发。失去焦点，鼠标光标焦点从输入框内移除，不能再输入内容后触发。当使用拼音输入法开始输入汉字，字符被输入到文字时。当使用拼音输入法开始输入汉字时触发。聚焦，鼠标光标聚焦在输入框内时触发。点击事件，鼠标点击输入框时触发。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值