如果在编程之前更改了值,则手动更改值不会触发onChange事件

Question

我们有一个输入type = "number",我们已经设置了一个onChange方法.

输入的默认值为0.

然后我们以编程方式将值更改为10.

现在我们再次手动将值更改为0.

该onChange方法不叫上手动进行改变.我认为这是因为当我们以编程方式将其值更改为10时未调用事件.因此,在某种程度上,控件认为该值仍为0.

只有当我手动将值设置为程序更改之前的值时,才会发生这种情况.如果我使用任何其他值来进行手动更改,onChange则会正确触发事件.

Answer 1

以编程方式更改表单控件的值不会触发其更改处理程序，这可能是因为更改事件被指定为在用户更改值并且控件失去焦点之后发生。程序更改不遵循该顺序（以编程方式设置焦点和模糊以模仿用户操作并没有帮助，尽管可以在元素上调度程序更改事件）。

HTML5 引入了一个新的input事件，每当输入接收到用户输入时都会触发该事件：

<input id="i0" oninput="alert(this.value);" value="">

您可以使用它而不是 onchange，但它会在每次按键时触发，并且在文本被粘贴或拖动到输入时也会触发。

但是请注意，没有浏览器完全支持 HTML5（并且可能永远不会，因为它是一个移动目标），因此您需要提供功能测试和回退机制，以防输入事件不受支持。