今天遇到了IE一个onchange事件
的bug,此bug存在于IE所有的版本(6,7,8)不知道是不是bug,还是IE故意这样设计的?姑且不做评价,我们来看看IE
onchange事件的重现过程:
给input等控件添加onchange事件,例如input的checkbox
(或radio
),在IE下点击选中,并没有触发onchange事件,而需要再次失去焦点(点击页面的任何地方)的时候才可以触发onchange事件,而在Firefox
下是点击选中checkbox(radio等)既可以触发onchange事件的。
bug重现代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>IE onchange event bug</title>
</head>
<body>
<input type="checkbox" value="1" onchange="alert(this.value);" id="demo1"/>
<label for="demo1">demo1</label>
<input type="checkbox" value="2" onchange="alert(this.value);" id="demo2"/>
<label for="demo2">demo2</label>
</body>
</html>
解决方法:
- 在保留onchange的前提下,在onclick里面调用checkbox(或radio)
的blur()方法。例如:
<input type="checkbox" value="1" onchange="alert(this.value);" onClick="this.blur();"
id="demo1"/>
- 在jQuery1.4
.2
中绑定change事件是完全可以解决的,而在jQuery1.3.2中绑定change事件是不行的,我们可以通过click
事件来绑定
-
如果不怕麻烦也不介意绑定两次事件,可以使用IE自带的onpropertychange事件
绑定change事件,不过这样子在IE下就绑定了两次change事件,不推荐这个方法,如果是checkbox,radio等还是使用click事件来处理吧。
分享到:
相关推荐
当时的实现是为这个checkbox添加一个onchange事件,但结果却出人意料,为此,我深入的研究了一下,发现了onchange事件在IE和FF下的表现存在着以下问题。 问题①:在FF下,当改变checkbox的选中状态时,会马上触发...
radio 单选JS动态添加的选项,onchange事件无效。使用delegate()函数可以解决该问题,具体解决方案大家通过本文详细了解下
安装该模块后,对于有写onchange方法的字段,可以设置定时执行时间间隔。
web前端小问题,select 选择事件,当选择select同一值触发onchange事件
主要介绍了javascript checkbox/radio onchange不能兼容ie8处理办法的相关资料,需要的朋友可以参考下
ckeditor onchange 事件插件
改变一下思路变成键盘按键事件,如下: ”txtName” runat=”server” xss=removed></asp> 这里有一点毛病是,你复制粘贴的内容,无法触发这个事件。下面是相关的一些代码: 代码如下: function fNameChange(){ if($...
这是我自己总结出来easyui-textbox和easyui-combobox的onchange事件响应实例,绝对可用,网上很多实例都无法运行,这个我亲自测试可用使用才传上来的,供大家参考学习。
js中onchange事件是在客户端改变输入控件的值,比如一个textbox,会出发的一个事件。但是如果在js代码中改变一个textbox的value,而不是通过键盘输入改变一个textbox值的话,是不会出发onchange事件的。 那么,如何...
jsp中select的onchange事件用法实例.docx
最近在使用layui框架做城市的三级级联的时候,发现jquery中的onchange事件方法在layui框架中失效了。 然后浏览layui社区,了解到layui监控一个控件变化有自己的方法。 html <select lay-filter=test></...
使用Delphi的OnChange事件,Timagelist组件..rar
在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,...
select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件
文档中详细描述了easy-ui如何添加onchange,以及如何获取组合框当前选中值。压缩包中还包括了相关的easy-ui demo供大家使用。自己总结的跟大家分享下。
小菜想通过事件中的信息,确定下一级的菜单,但是这个貌似很简单的问题,却让小菜纠结了一番。 稍微懂点JQuery的童鞋,可能会尝试这样获取: 代码如下: $(document).ready(function(){ var onchangeValue = $...
主要介绍了jsp中select的onchange事件用法,以实例形式较为详细的分析了JSP数据库查询、遍历及结合JavaScript响应鼠标事件处理select相关技巧,需要的朋友可以参考下