如何用JavaScript模拟按键事件修改contenteditable div内容并提交表单

你的代码无法修改contenteditable元素内容的核心原因有两个：

1. 键盘事件无法直接触发内容插入：浏览器出于安全限制，不会仅因为你dispatch了keypress（该事件已被废弃）、keydown或keyup事件就自动向输入元素中插入字符——这些事件只是通知系统“某个按键被触发”，不会模拟真实的输入行为。
2. 事件参数设置错误：keyCode是旧的键盘事件属性，且你用charCodeAt()拿到的是字符的Unicode编码，和keyCode的映射关系并不一致，这也导致事件无法被正确识别。

可行解决方案 #

方案1：使用document.execCommand（快速实现，兼容性好） #

虽然document.execCommand已被标记为废弃，但目前主流浏览器仍支持它，且能模拟真实输入并触发页面的输入监听事件（比如Twitter的输入框会监听输入来启用提交按钮）。

const tweetBox = document.querySelector("[data-testid='tweetTextarea_0']");
tweetBox.focus();
tweetBox.textContent = ""; // 清空原有内容

const text = "Hello, world!";
// 插入文本，模拟真实输入
document.execCommand('insertText', false, text);

const tweetButton = document.querySelector("[data-testid='tweetButtonInline']");
tweetButton.click();

console.log("\nButton Clicked");

方案2：使用InputEvent（现代标准方式） #

这是更符合现代Web标准的方法，通过创建input事件来模拟文本插入，能正确触发页面的输入相关监听：

const tweetBox = document.querySelector("[data-testid='tweetTextarea_0']");
tweetBox.focus();
tweetBox.textContent = "";

const text = "Hello, world!";
// 创建插入文本的InputEvent
const inputEvent = new InputEvent('input', {
  inputType: 'insertText',
  data: text,
  bubbles: true, // 确保事件能冒泡到父元素
  cancelable: true
});
tweetBox.dispatchEvent(inputEvent);

// 如果需要模拟逐字符输入，取消下面的注释：
// for (const char of text) {
//   const charEvent = new InputEvent('input', {
//     inputType: 'insertText',
//     data: char,
//     bubbles: true,
//     cancelable: true
//   });
//   tweetBox.dispatchEvent(charEvent);
// }

const tweetButton = document.querySelector("[data-testid='tweetButtonInline']");
tweetButton.click();

console.log("\nButton Clicked");

额外说明 #

对于像Twitter这类有复杂输入校验的网站，必须使用能触发真实输入事件的方法（上述两种方案），否则页面的提交按钮可能不会被启用——直接修改textContent或仅触发键盘事件，无法触发网站内部的状态更新逻辑。

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