JavaScript模拟键盘输入可行方案咨询：已有尝试均无效

以下是针对输入框内容被立即清除问题的几种解决方案：

方案1：延迟触发事件 #

部分场景下，目标元素的清除逻辑是同步执行的，使用setTimeout将事件触发放到宏任务队列，避开同步清除：

const element = document.querySelector('目标选择器');
element.value = '0';
// 延迟0毫秒，将事件触发放到下一轮事件循环
setTimeout(() => {
  element.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
  element.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
}, 0);

方案2：模拟完整键盘事件序列 #

补充keyup事件，并设置更多兼容老逻辑的事件属性（比如code、which），确保事件触发的完整性：

const element = document.querySelector('目标选择器');
// 先聚焦元素，模拟真实输入流程
element.focus();

// 模拟keydown
const keydownEvt = new KeyboardEvent('keydown', {
  key: '0',
  code: 'Digit0',
  which: 48,
  charCode: 48,
  bubbles: true,
  cancelable: true,
  view: window
});
element.dispatchEvent(keydownEvt);

// 模拟keypress
const keypressEvt = new KeyboardEvent('keypress', {
  key: '0',
  code: 'Digit0',
  which: 48,
  charCode: 48,
  bubbles: true,
  cancelable: true,
  view: window
});
element.dispatchEvent(keypressEvt);

// 更新输入框值并触发input事件
element.value = '0';
element.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));

// 模拟keyup
const keyupEvt = new KeyboardEvent('keyup', {
  key: '0',
  code: 'Digit0',
  which: 48,
  charCode: 48,
  bubbles: true,
  cancelable: true,
  view: window
});
element.dispatchEvent(keyupEvt);

// 触发change事件适配失焦更新场景
element.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));

方案3：使用document.execCommand插入文本 #

该API虽已废弃，但部分旧组件或系统仍支持，它会模拟真实的文本插入行为，触发完整的输入事件：

const element = document.querySelector('目标选择器');
element.focus();
// 选中原有内容（若存在），确保新内容覆盖原有值
element.select();
// 插入文本
document.execCommand('insertText', false, '0');
// 触发必要事件
element.dispatchEvent(new Event('input', { bubbles: true }));
element.dispatchEvent(new Event('change', { bubbles: true }));

方案4：针对框架受控组件直接修改状态 #

如果目标输入框是React、Vue等框架的受控组件，直接修改DOM的value会被组件状态覆盖，需直接更新组件内部状态：
以React为例（依赖内部实现，仅用于调试）：

const element = document.querySelector('目标选择器');
// 通过React内部实例获取组件并更新状态
const reactInstance = element._reactRootContainer._internalRoot.current.return;
reactInstance.setState({ 对应输入框的状态字段: '0' });

方案5：临时移除监听再恢复 #

若目标元素有自定义的输入监听导致内容被清除，可先移除监听，修改值后再恢复：

const element = document.querySelector('目标选择器');
// 获取所有input事件监听
const inputListeners = getEventListeners(element).input || [];
// 移除监听
inputListeners.forEach(listener => {
  element.removeEventListener('input', listener.listener, listener.useCapture);
});
// 修改值
element.value = '0';
// 触发事件
element.dispatchEvent(new Event('input', { bubbles: true }));
// 恢复监听
inputListeners.forEach(listener => {
  element.addEventListener('input', listener.listener, listener.useCapture);
});

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