Tampermonkey注入JS修改Input值，视觉显示但提交无效求助

1. 触发输入框原生同步事件 #

直接修改value仅更新了DOM属性，多数现代网站（尤其是用Vue/React这类框架的）会通过监听input/change事件同步数据到内部状态，手动触发这些事件就能让系统识别到值的变化：

const input = document.querySelector("input[name='fighter']");
input.value = 1;
// 触发input事件（核心，框架通常监听这个）
input.dispatchEvent(new Event('input', { bubbles: true }));
// 可选补充：触发change事件适配部分场景
input.dispatchEvent(new Event('change', { bubbles: true }));

2. 确保元素完全加载后执行 #

如果页面是动态渲染的，可能代码执行时元素还未生成，用延迟执行确保元素存在：

setTimeout(() => {
  const input = document.querySelector("input[name='fighter']");
  if (input) {
    input.value = 1;
    input.dispatchEvent(new Event('input', { bubbles: true }));
  }
}, 1000); // 根据页面加载速度调整延迟时长

3. 模拟真实用户输入行为 #

如果事件触发无效，试试模拟键盘输入的完整流程，更贴近手动操作：

const input = document.querySelector("input[name='fighter']");
input.focus();
document.execCommand('selectAll', false, null); // 选中原有内容
document.execCommand('insertText', false, '1'); // 插入目标值

4. 应对可能的属性劫持 #

部分网站会用Object.defineProperty劫持value属性，试试修改defaultValue再触发事件：

const input = document.querySelector("input[name='fighter']");
input.defaultValue = 1;
input.dispatchEvent(new Event('input', { bubbles: true }));

5. 排查目标元素的事件绑定 #

打开浏览器开发者工具（F12），选中目标输入框，在Elements面板的Event Listeners标签查看绑定的事件类型（比如有的网站监听keyup/keydown），针对性触发对应事件。

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