通过JS修改input值后如何同步更新<p>标签内容？

开发Chrome插件时，通过JS设置<input>字段的值后，页面上关联的<p>标签未同步更新（手动输入时能正常更新）。已尝试触发change、input等事件但无效，推测页面监听了键盘或其他输入相关事件，且无法查看源码，需要原生JS解决方案。

1. 使用InputEvent替代通用Event #

手动输入时浏览器触发的是**InputEvent**而非普通Event，用它模拟输入行为更贴近原生逻辑：

const inputElement = document.getElementById("myInputField");
inputElement.value = "20%";

// 创建符合原生输入的InputEvent
const inputEvent = new InputEvent('input', {
    bubbles: true,
    cancelable: true,
    composed: true // 允许事件穿透Shadow DOM（如果页面使用了）
});
inputElement.dispatchEvent(inputEvent);

// 补充触发change和blur事件，覆盖可能的监听逻辑
const changeEvent = new Event('change', { bubbles: true, cancelable: true });
inputElement.dispatchEvent(changeEvent);
inputElement.blur();

2. 模拟完整键盘输入流程 #

如果页面监听了keydown/keypress/keyup这类键盘事件，需要模拟完整的键盘输入流：

const inputElement = document.getElementById("myInputField");
inputElement.focus(); // 先获取焦点，模拟手动输入的前置状态

// 模拟单个按键的完整事件链
function triggerKeyEvents(element, key) {
    element.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
    element.dispatchEvent(new KeyboardEvent('keypress', { key, bubbles: true }));
    element.dispatchEvent(new KeyboardEvent('keyup', { key, bubbles: true }));
}

// 设置值后触发键盘事件，再补充输入相关事件
inputElement.value = "20%";
triggerKeyEvents(inputElement, 'Enter'); // 用Enter键模拟输入完成，也可替换为对应字符键
inputElement.dispatchEvent(new InputEvent('input', { bubbles: true }));
inputElement.dispatchEvent(new Event('change', { bubbles: true }));
inputElement.blur();

3. 强制触发元素的属性变更（极端场景） #

如果上述方法都无效，可尝试通过修改value属性后，强制触发元素的属性变更监听：

const inputElement = document.getElementById("myInputField");
// 先移除再重新设置value，触发属性变更
inputElement.value = "";
inputElement.value = "20%";

// 组合触发多种事件
inputElement.dispatchEvent(new InputEvent('input', { bubbles: true }));
inputElement.dispatchEvent(new Event('change', { bubbles: true }));
inputElement.dispatchEvent(new Event('blur', { bubbles: true }));

内容的提问来源于stack exchange，提问作者nTuply