JS设置输入框值后自动恢复的问题排查与解决

成因 #

页面大概率使用了Vue、React这类前端框架，这类框架会维护独立的内部状态，DOM只是状态的视图映射。你直接通过inputField.value = "some value"修改DOM值，仅更新了视图，但框架的内部状态并未同步。当页面触发重新渲染（比如点击其他输入框触发状态校验、组件更新）时，框架会用未更新的内部状态覆盖DOM值，导致你设置的内容被还原。

即使触发了input和change事件，普通的Event可能不满足框架的事件检测要求（比如缺少composed属性、事件类型不对），无法触发框架的状态同步逻辑。

解决方案 #

1. 发送符合框架要求的完整事件 #

使用InputEvent替代普通Event，并添加composed: true确保事件能穿透可能存在的Shadow DOM，同时保留bubbles和cancelable属性：

// 设置值
inputField.value = "some value";

// 构造并发送input事件
const inputEvent = new InputEvent('input', {
  bubbles: true,
  cancelable: true,
  composed: true
});
inputField.dispatchEvent(inputEvent);

// 构造并发送change事件
const changeEvent = new Event('change', {
  bubbles: true,
  cancelable: true,
  composed: true
});
inputField.dispatchEvent(changeEvent);

2. 模拟真实用户输入（最可靠） #

完全模拟用户输入流程，包括聚焦、选中原有内容、插入新值、失焦，这种方式能触发所有框架监听的用户交互事件：

inputField.focus();
inputField.select(); // 选中原有内容，方便直接替换
document.execCommand('insertText', false, 'some value');
inputField.blur(); // 失焦触发change事件

注：execCommand虽已标记为废弃，但目前主流浏览器仍支持，适合此类场景。

3. 直接修改框架内部状态（hack性质，慎用） #

如果能定位到框架的状态对象，可直接修改内部状态实现同步：

• 若页面用Vue：查看输入框元素的__vue__属性，找到对应的状态字段修改

  // 示例：假设输入框绑定的是Vue实例的form.recipient属性
  inputField.__vue__.$data.form.recipient = "some value";
  

• 若页面用React：通过_reactInternalInstance找到状态对象并更新（React版本不同实现可能有差异）

这种方法依赖框架内部实现，易随版本失效，仅作为备选方案。

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