如何以编程方式模拟输入内容可编辑的 HTML 元素？答案

【问题标题】：How can I programmatically simulate typing in a contenteditable HTML element?如何以编程方式模拟输入内容可编辑的 HTML 元素？
【发布时间】：2020-05-03 05:05:21
【问题描述】：

我需要模拟用户以编程方式输入contenteditable HTML 元素的交互。

我不能使用诸如HTMLElement.onkeypress() 或HTMLElement.fire() 之类的东西。

我无法使用element.innerHTML 或element.textContent 修改元素的实际代码或内容，我需要一种方法来模拟它。

【问题讨论】：

标签： javascript html dom-events contenteditable keyboard-events

【解决方案1】：

您可以将Document.execCommand() 与insertText command 一起使用，这也会自动触发input events：

const editor = document.getElementById('editor');

editor.oninput = (e) => console.log('Input');

setTimeout(() => {
  editor.focus();
  
  document.execCommand('insertText', false, 'Inserted text...\n\n');
}, 1000);

body {
  display: flex;
  flex-direction: column;
  font-family: monospace;
}

#editor {
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, .125);
  border-radius: 2px;
  min-height: 64px;
  padding: 16px;
  outline: none;
}

&lt;div id="editor" contenteditable="true"&gt;&lt;/div&gt;

但是，请注意，它目前已经过时，甚至在它在不同浏览器之间不一致之前（与 contenteditable 相同）：

已过时

此功能已过时。尽管它可能在某些浏览器中仍然有效，但不鼓励使用它，因为它可能随时被删除。尽量避免使用它。

【讨论】：

【解决方案2】：

你可以这样做：

const element = document.querySelector('div');

const text = "This is my text";
var i = 0;

function type() {
    setTimeout(function() {
    element.textContent += text.charAt(i);
    i++;
    if (i < text.length) {
      type(); 
    }
  }, 500)
}

type();

&lt;div contenteditable="true"&gt;&lt;/div&gt;

似乎用户正在缓慢地输入 div。您可以通过更改 500 参数来调整速度。

【讨论】：

【解决方案3】：

如果您只需要模拟用户的输入，您可以使用可编写脚本的浏览器，例如 puppeteer。它是一个 nodejs 包，它为您提供了一个可以从您的代码中控制的浏览器，并且它拥有您所需要的东西。你甚至可以控制打字速度等。

这是一个打开谷歌页面并在搜索框中输入文本“Hello world :D”的示例代码

const puppeteer = require("puppeteer");

async function main() {
  let browser = await puppeteer.launch();
  let page = await browser.pages().then((pages) => pages[0]);
  await page.goto("https://google.com");
  await page.type('input[name="q"]', "Hello world :D", {
    delay: 50
  });
}

main();

【讨论】：