我的表单中有一个输入。
<input type="text" id="changeProgramatic" onchange="return ChangeValue(this);"/>
如果我使用另一个 JavaScript 函数更改此文本框 (changeProgramatic) 中的值，则不会触发更改事件。（注意：我将“this”传递到方法中）
当输入值以编程方式更改时触发更改事件？
IT技术
javascript
jquery
html
2021-01-19 16:30:56
3个回答
香草JS解决方案：
var el = document.getElementById('changeProgramatic');
el.value='New Value'
el.dispatchEvent(new Event('change'));
请注意，dispatchEvent这在旧 IE 中不起作用（请参阅：caniuse）。所以你应该只在内部网站上使用它（而不是在拥有广泛受众的网站上）.
因此，截至 2019 年，您可能只想确保您的客户/观众不使用 Windows XP（是的，有些人在 2019 年仍在使用）。您可能希望使用条件注释来警告客户您不支持旧版 IE（在本例中为 IE 11 之前），但请注意，条件注释仅在 IE9 之前有效（在 IE10 中无效）。所以你可能想改用特征检测。例如，您可以提前检查：
typeof document.body.dispatchEvent === 'function'。
您正在使用 jQuery，对吗？将 JavaScript 与 HTML 分开。
您可以使用trigger或triggerHandler。
var $myInput = $('#changeProgramatic').on('change', ChangeValue);
var anotherFunction = function() {
$myInput.val('Another value');
$myInput.trigger('change');
};
如果有人正在使用 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 }));