Tampermonkey脚本修改网页input值后立刻消失，如何让修改值保留？

开发者阿泽

2026-10-5

问题根因

直接修改value属性仅更新了DOM元素的属性值，没有触发输入框绑定的input、change等事件，页面的表单校验/状态同步逻辑感知不到你的修改，提交前就会重置输入框内容。

可行解决方案

方案1：主动触发事件（兼容性最高）

修改完值后主动抛出输入相关事件，通知页面逻辑值已更新：

unitsInput[i].value = spearman[currentScavenge];
// 触发实时输入事件，适配大部分监听输入的场景
unitsInput[i].dispatchEvent(new Event('input', { bubbles: true }));
// 触发失焦变更事件，适配仅监听内容变化的场景
unitsInput[i].dispatchEvent(new Event('change', { bubbles: true }));

方案2：模拟真实用户输入（适配有框架状态管理的页面）

如果页面是基于React/Vue等前端框架开发的，直接修改DOM属性无法同步到框架内部状态，可以用模拟输入的方式写入值：

unitsInput[i].focus();
// 选中原有内容
document.execCommand('selectAll', false);
// 插入新值，等价于用户手动输入
document.execCommand('insertText', false, String(spearman[currentScavenge]));