我们有一个输入type = "number"
,我们设置了一个onChange
方法。
输入的默认值为 0。
然后我们以编程方式将值更改为 10。
现在我们再次手动将值更改为 0。
手动进行的更改不会调用onChange
方法。我认为这是因为当我们以编程方式将其值更改为 10 时,没有调用该事件。因此,在某种程度上,控件认为该值仍为 0。
仅当我手动将值设置为编程更改之前的值时,才会发生这种情况。如果我使用任何其他值进行手动更改,则会正确触发onChange
事件。
以编程方式更改窗体控件的值不会触发其更改处理程序,可能是因为更改事件被指定为在用户更改值并且控件失去焦点之后发生。编程更改不遵循该顺序(以编程方式设置焦点和模糊以模仿用户操作无济于事,尽管可以在元素上调度编程更改事件)。
HTML5引入了一个新的输入事件,每当输入收到用户输入时都会触发:
<input id="i0" oninput="alert(this.value);" value="">
您可以使用它而不是 onchange,但它会在每次按键时触发,并且如果文本被粘贴或拖动到输入中,也会触发。
但请注意,没有浏览器完全支持 HTML5(可能永远不会,因为它是一个移动目标),因此如果不支持输入事件,您需要提供功能测试和回退机制。
输入需要焦点才能触发更改。如果以编程方式设置输入值不会触发 onchange 事件,这实际上是一件好事。它将从输入和代码之间创建一个循环设置。
如果有人仍然在这个问题上堆积
起来inputEl.dispatchEvent('change')