Question

我的表单中有一个输入法。

<input type="text" id="changeProgramatic" onchange="return ChangeValue(this);"/>

如果我使用另一个JavaScript函数更改此textBox（changeProgramatic）中的值，则不会触发更改事件。（注意：我将'this'传递给方法）

Answer 1

Vanilla JS解决方案：

var el = document.getElementById('changeProgramatic');
el.value='New Value'
el.dispatchEvent(new Event('change'));

请注意，dispatchEvent在旧版IE中不起作用（请参阅：caniuse）。 ~~所以你应该只在内部网站上使用它（不是在拥有广泛受众的网站上）~~。

从2019年开始，您可能希望确保您的客户/受众不使用Windows XP（是的，有些人仍然在2019年使用）。您可能希望使用conditional comments来警告客户您不支持旧的IE（在这种情况下是IE 11之前的版本）。

Answer 2

你正在使用jQuery，对吗？将JavaScript与HTML分开。

您可以使用trigger或triggerHandler。

var $myInput = $('#changeProgramatic').on('change', ChangeValue);

var anotherFunction = function() {
  $myInput.val('Another value');
  $myInput.trigger('change');
};

Answer 3

如果有人在使用react，则以下操作将很有用：

https://stackoverflow.com/a/62111884/1015678

const valueSetter = Object.getOwnPropertyDescriptor(this.textInputRef, 'value').set;
const prototype = Object.getPrototypeOf(this.textInputRef);
const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(this.textInputRef, 'new value');
} else {
    valueSetter.call(this.textInputRef, 'new value');
}
this.textInputRef.dispatchEvent(new Event('input', { bubbles: true }));

输入值以编程方式更改时触发更改事件？

3 个答案: