今天遇到了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的选中状态时,会马上触发...
这个问题常常出现在使用JavaScript动态向页面中添加单选按钮(radio)时,为这些动态添加的单选按钮绑定的onchange事件无法正常触发。描述中提到,通过使用delegate()函数可以有效解决此类问题。 在了解如何解决...
为了解决这个兼容性问题,我们可以采用一些策略来模拟在IE8中触发`onchange`事件的行为。一种常见的方法是使用`click`事件替代`onchange`。因为`click`事件在所有浏览器中(包括IE8)都能可靠地在用户点击`checkbox`...
js中onchange事件是在客户端改变输入控件的值,比如一个textbox,会出发的一个事件。但是如果在js代码中改变一个textbox的value,而不是通过键盘输入改变一个textbox值的话,是不会出发onchange事件的。 那么,如何...
web前端小问题,select 选择事件,当选择select同一值触发onchange事件
"onchange" 事件插件是 CKEditor 的一个扩展功能,它允许开发者监听编辑器中的内容变化,并在内容发生改变时触发特定的回调函数。这个功能对于实时保存、自动校验或者实时预览等场景非常有用。 CKEditor 的 ...
安装该模块后,对于有写onchange方法的字段,可以设置定时执行时间间隔。
在这个主题中,我们将深入探讨如何使用Timagelist组件以及其onChange事件。 首先,让我们了解Timagelist组件的基本功能。Timagelist不仅能够存储图像,还支持多种图像格式,如BMP、JPEG、PNG等。你可以通过它的`Add...
在这个实例中,我们将深入探讨 EasyUI 中的两个重要组件:`easyui-textbox` 和 `easyui-combobox`,以及它们的 `onchange` 事件响应。 `easyui-textbox` 是一个基础输入框组件,它扩展了原生 HTML 的 `input` 元素...
改变一下思路变成键盘按键事件,如下: ”txtName” runat=”server” xss=removed></asp> 这里有一点毛病是,你复制粘贴的内容,无法触发这个事件。下面是相关的一些代码: 代码如下: function fNameChange(){ if($...
在本文中,我们将深入探讨如何在Easy-UI框架中使用`onchange`事件,以及如何获取组合框(Combobox)的当前选中值。Easy-UI是一个基于jQuery的轻量级前端开发框架,它提供了丰富的组件,如表格、窗口、菜单、对话框等...
在Web开发中,`onchange`事件是一种常用的JavaScript事件,用于在用户更改表单元素(如`<select>`下拉列表)时触发特定的操作。在JSP(JavaServer Pages)环境中,结合Java后端技术,我们可以实现更复杂的功能,例如...
在前端开发中,select元素和text文本输入框元素经常需要处理用户的交互行为,其中onchange事件是一个非常重要的事件。onchange事件会在元素的内容改变并且失去焦点后触发。但在JavaScript中,直接给select或text赋值...
这个文件可能包含了修复IE`change`事件问题的具体实现,包括但不限于事件监听器的设置、事件触发逻辑的重写、以及对不同浏览器行为的适配代码。为了使用这个插件,开发者需要将此文件引入到他们的项目中,并正确配置...
最近在使用layui框架做城市的三级级联的时候,发现jquery中的onchange事件方法在layui框架中失效了。 然后浏览layui社区,了解到layui监控一个控件变化有自己的方法。 html <select lay-filter=test></...
例如,`onchange`和`onblur`事件在IE和Firefox中的触发时间可能不同,开发者需要考虑到这些差异,以确保事件处理的一致性。 7. **body测试.html** `body`元素在不同浏览器中的加载时机和处理方式也可能有区别。在...