如何使用JavaScript修改文本框值，解决修改后自动恢复旧值的问题

问题根因 #

• 选择器使用错误：当前代码选中的是<label>标签元素，该元素没有value属性，且拼写错误queryselector应为驼峰命名querySelector，目标输入框的id是shipping_lastname而非shipping_firstname-label。
• 受控组件状态未同步：该输入框是React/Vue等现代前端框架实现的受控组件，直接修改DOM的value属性不会同步更新框架内部维护的状态，框架触发重渲染时就会用内部存储的旧值覆盖手动修改的DOM值。

解决方案 #

先修正选择器，再手动触发输入事件通知框架更新内部状态，参考代码如下：

// 选中目标输入框
const targetInput = document.querySelector('#shipping_lastname');
// 设置新值
targetInput.value = "myValue";
// 触发input事件同步状态，大部分框架通用
targetInput.dispatchEvent(new Event('input', { bubbles: true }));
// 部分场景需要额外触发change事件
targetInput.dispatchEvent(new Event('change', { bubbles: true }));

如果是React 16及以上版本，上述方法不生效时可以用下面的代码绕过合成事件拦截：

const targetInput = document.querySelector('#shipping_lastname');
// 获取原生value赋值方法
const nativeValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
nativeValueSetter.call(targetInput, 'myValue');
// 触发input事件
targetInput.dispatchEvent(new Event('input', { bubbles: true }));

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