如何以编程方式模拟在 contenteditable HTML 元素中键入内容？

Question

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

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

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

Answer 1

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

这是打开 google 页面并在搜索框中输入文本 "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();

Answer 2

您可以自动使用 Document.execCommand() with the insertText command, which will also fire 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;
}

<div id="editor" contenteditable="true"></div>

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

Obsolete

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Answer 3

你可以这样做：

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();

<div contenteditable="true"></div>

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

如何以编程方式模拟在 contenteditable HTML 元素中键入内容？

How can I programmatically simulate typing in a contenteditable HTML element?

html

javascript

contenteditable

keyboard-events

dom-events