纯JS给WhatsApp网页版可编辑DIV设置innerText无法触发搜索事件怎么办

问题原因 #

WhatsApp网页版基于React框架开发，React内部维护了独立的状态管理和合成事件系统，你直接修改DOM的innerText属性、派发简单的原生事件，无法同步到React的内部状态，也无法被React的合成事件监听器捕获，所以会出现内容填充了但占位符不消失、搜索不触发的情况。

可用解决方案 #

按以下步骤执行即可触发正常搜索：

1. 定位搜索框元素

// 优先用querySelector匹配更精准，避免选到其他同class元素
const searchInput = document.querySelector('div._13NKt.copyable-text.selectable-text[contenteditable="true"][role="textbox"]');

2. 先让元素获得焦点，对应你手动点击DIV的操作

searchInput.focus();

3. 不要直接修改innerText，使用execCommand插入文本，这个API会模拟真实用户输入的事件流，能被React监听到

document.execCommand('insertText', false, 'test');

4. 补全完整的输入事件流，模拟真实用户输入完成的动作

// 模拟按键按下抬起的完整流程
searchInput.dispatchEvent(new KeyboardEvent('keydown', {
  bubbles: true,
  cancelable: true,
  key: ' ' // 对应你手动按空格键的操作
}));
searchInput.dispatchEvent(new Event('input', { bubbles: true }));
searchInput.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));

补充说明 #

如果不需要模拟按空格的操作，想输入后直接触发搜索，把上面keydown事件的key值改成Enter即可。

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