12

我希望为 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

4

7 回答 7

12

Actually, IE, especially IE7/8 doesn't support onchange event very well . I do recommend you use onclick event.

于 2012-10-19T03:36:56.413 回答
5

onchange根据 MSDN ，事件不会在 IE 中冒泡。

于 2012-06-04T04:08:02.247 回答
2

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

谢谢

于 2013-09-12T10:55:16.153 回答
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())
});
于 2018-11-07T08:56:05.110 回答
1

大多数情况下，所有 Web 开发人员都必须面临这个问题。是的，旧版本的 IE 有时不会触发onChange事件并将其替换为onClick作品。

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

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

于 2017-01-17T02:57:00.157 回答
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();
        }
        });
  }


});
于 2019-05-24T15:13:12.350 回答
0

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

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

  2. 在你的js文件中添加以下代码

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

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

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

于 2017-06-01T11:37:54.953 回答