使用JavaScript设置input的.value无效，表单保存后值复原求助

你的问题核心是：直接修改DOM输入框的value属性仅更新了表面视图，但没有同步页面前端框架（比如React、Vue或自定义表单组件）的内部状态，当框架触发重新渲染（如点击输入框、保存表单）时，会用内部状态覆盖DOM值，导致回滚到初始的insert-customer-name。

以下是纯JavaScript的解决方案，适配Chrome扩展场景：

方法1：触发input事件（优先推荐） #

前端框架通常监听input事件来同步状态，修改值后触发该事件即可：

const inputElement = document.querySelector('.next-input.next-medium input');
// 设置新值
inputElement.value = 'Customer Name';
// 触发input事件，通知框架更新内部状态
inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));

方法2：组合触发input+change事件 #

部分表单会监听change事件完成最终校验或同步，可补充触发：

const inputElement = document.querySelector('.next-input.next-medium input');
inputElement.value = 'Customer Name';
inputElement.dispatchEvent(new Event('input', { bubbles: true }));
inputElement.dispatchEvent(new Event('change', { bubbles: true }));

方法3：模拟真实用户输入（应对严格校验场景） #

如果页面有防自动填充的逻辑，可模拟逐字符输入的行为：

async function fillInput(element, value) {
  element.focus(); // 先激活输入框
  element.value = ''; // 清空原有内容
  for (const char of value) {
    element.value += char;
    element.dispatchEvent(new Event('input', { bubbles: true }));
    await new Promise(resolve => setTimeout(resolve, 10)); // 模拟输入间隔
  }
  element.dispatchEvent(new Event('change', { bubbles: true }));
  element.blur(); // 可选：失去焦点
}

// 使用示例
const inputElement = document.querySelector('.next-input.next-medium input');
fillInput(inputElement, 'Customer Name');

注意事项 #

• 确保代码在DOM完全加载后执行：Chrome扩展的content script可配置"run_at": "document_idle"，或监听DOMContentLoaded事件。
• 若输入框有readonly/disabled属性，需先移除再修改：inputElement.removeAttribute('readonly')。
• 部分页面可能需要先点击输入框激活，再执行修改逻辑。

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