Question

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

这是片段

<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

Answer 1

实际上，IE，特别是IE7 / 8不能很好地支持onchange事件。我建议您使用onclick事件。

Answer 2

根据MSDN，

onchange事件does not bubble in IE。

Answer 3

在 jquery 的 .change <）功能之前，请避免使用 .focus（）或 .select（）对于IE，它工作正常，我在我的网站上使用它。

由于

Answer 4

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

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

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

Answer 5

我在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())
});

Answer 6

实际上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将在所有浏览器上触发并调用所需的函数

Answer 7

我创建了这段代码来触发不是由Interenet 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();
        }
        });
  }


});

OnChange没有在IE中触发

7 个答案: