OnChange 没有在 IE 中触发答案

【问题标题】：OnChange not firing in IEOnChange 没有在 IE 中触发
【发布时间】：2012-06-08 05:19:43
【问题描述】：

我希望为 DIV 中表单元素的所有更改触发 Onchange 事件

这是sn-p

<html>
<body>

<div id="container">
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="text"/>
    <input type="text"/>
</div>

<script>
di = document.getElementById("container");
di.onchange = function(a){
alert("On Change Called");
}

di.onclick = function(a){
 alert("On Click Called");
}

</script>

</body>
</html>

当焦点从任何表单元素丢失到表单的新元素时，当某些内容被更新（例如：输入框被更新）时触发该事件

以上代码适用于所有浏览器，但不适用于 IE，IE 可以做到这一点

【问题讨论】：

我确实建议使用 jQuery 来避免这些跨浏览器问题，但这并不意味着您应该跳过测试。 Jquery on Change reference here.Scott Leberknight 的 onChange http://www.nofluffjuststuff.com/blog/scott_leberknight/2005/04/onclick_versus_onchange_in_ie_and_firefox
onchange event doest not bubble in MSIE. Where do I find a chart listing all such events的可能重复

标签： javascript internet-explorer

【解决方案1】：

我创建了这段代码来触发不是由 Internet Explorer 触发的 onchange 事件。

与 asp.net 文本框一起使用

<!-- LOCAL SCRIPT -->
<script type="text/javascript">
$(document).ready(function () {

  // CTRL - fix explorer bug for OnChange not triggered. Converted to OnBlur + test
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var tempControl = $("#<%= textboxNAME.ClientID %>");
    var tempATTRIBUTE = "data-lastvalue";
    // GET - save current value inside attribute
    tempControl.attr(tempATTRIBUTE, tempControl.val());
    // BIND - onblur event
    $("#<%= textboxNAME.ClientID %>").blur(function () {
        var tempPrevValue = tempControl.attr(tempATTRIBUTE);
        // CTRL - is there a difference of value (onchange)
        if (tempControl.val() != tempPrevValue) {
            // SET - trigger change js binded to textbox
            $(this).change();
        }
        });
  }


});

【讨论】：

【解决方案2】：

我在 Edge 中遇到了同样的问题，并使用 EventListener 修复了它。

我的代码如下所示：

HTML：

<input type="text" id="my_id" name="my_name" placeholder="my_placeholder" onchange="my_function(this.value.trim())" autofocus>

然后我改成：

HTML：

<input type="text" id="my_id" name="my_name" placeholder="my_placeholder" autofocus>

JS：

document.getElementById("my_id").addEventListener("change", function() {
    my_function(this.value.trim())
});

【讨论】：

【解决方案3】：

实际上 Onchange 在 IE 中并不能很好地工作。这是我在使用 Javascript 时所做的。您可以相应地复制它。

在 HTML 中添加 ondrop 事件以调用现在正在调用的函数，而不是 onchange。

在你的js文件中添加如下代码

document.getElementById('--your selector--').ondragover = handle;

function handle(evt)
{
     evt.stopPropagation();
     evt.preventDefault();
     evt.dataTransfer.dropEffect = 'copy'
}

上面的代码会将ondragover设为false，然后ondrop将在所有浏览器上触发并调用所需的函数

【讨论】：

【解决方案4】：

几乎所有网络开发人员都必须面对这个问题。是的，旧版本的 IE 有时不会触发 onChange 事件并将其替换为 onClick 有效。

但最新的 IE 11 不会出现这种情况。在我的案例中，我发现在 onChange 事件上调用的函数名称在某处发生冲突。我只是将其更改为其他名称，在整个上下文中听起来应该是独一无二的，然后它就起作用了。

结论：IE 11 在发现一些相似名称时会感到困惑在与onchange目标函数匹配的系统内（甚至我猜的文件名），而其他浏览器是智能的够了。

【讨论】：

就我而言，我的开发机器在 Windows 10 + IE11(KB3203621) 上运行，onchange 完美触发。但是当我将它部署到生产环境时，在 Windows 7 + IE11(KB2841134) 上进行了测试，onchange 拒绝工作。但不知何故，onKeyPress 确实在开发机器和生产环境上都有效。会不会和那些更新版本有关？
@mutanic yeh.. 很可能.. 他们已经修复了这个问题，但在最新版本中。

【解决方案5】：

避免在 jquery 的 .change() 函数之前使用 .focus() 或 .select()对于 IE，它可以正常工作，我在我的网站中使用它。

谢谢

【讨论】：

【解决方案6】：

其实IE，尤其是IE7/8，对onchange事件的支持不是很好。我建议您使用onclick 事件。

【讨论】：

【解决方案7】：

onchange 事件 does not bubble in IE 根据 MSDN。

【讨论】：

此链接不再引用 MSDN，它似乎指向 Mozilla 自己的文档，该文档声称 Internet Explorer 支持 onChange 事件。