Question

在此HTML

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title></title>

    </head>

  <body>

    Enter some number here:
    <input  type="number" min="0" 
          oninput="console.log(' on input '); 
          this.value = Math.abs(this.value);"
          onchange="console.log(' on change');"/>

  </body>
</html>

输入有2个事件处理程序

输入
更改

但是没有调用onchange。

请注意，oninput处理程序会更改输入的值。如果我删除

this.value = Math.abs(this.value);

两个事件都被触发。

在Microsoft Edge 44.17763.1.0（Microsoft EdgeHTML 18.17763）中看到的这种行为

在Chrome和Firefox中都不会发生这种情况。

问题

我在做什么错了？
这是从继承的大型代码库中获得的，其中许多输入全部带有oninput和onchange。该onchange不被调用。解决此问题的最有效方法是什么？（免责声明：我不是HTML / javascript专家。）

Answer 1

oninput 事件与 onchange 事件类似。 区别在于oninput事件是在元素的值更改后立即发生的，而onchange事件是在元素的内容更改后失去焦点时发生的。

我尝试使用MS Edge，Chrome和Firefox浏览器测试您的示例代码，并且能够通过MS Edge浏览器产生问题。

好像MS Edge浏览器的工作方式几乎没有什么不同。

我注意到，如果您尝试在头部编写JS代码，那么它可以帮助解决此问题。

示例：

<!DOCTYPE html>
<html>
<body>
<input  type="number"   onchange="myFunction1(this.value)" oninput="myFunction(this.value)" />
<p id="demo"></p>
<p id="demo1"></p>

<script>
function myFunction(val) {
  document.getElementById("demo").innerHTML = "oninput " + val; 

}
function myFunction1(val) {
  document.getElementById("demo1").innerHTML = "onchange " + val; 
}
</script>

</body>
</html>

在MS Edge浏览器中输出：

更改值以触发事件后，用户需要按Enter键或单击其他位置。

当输入具有更改输入值的输入事件处理程序时，为什么Edge会屏蔽onchange事件处理程序？

1 个答案: