我该如何编程模拟在可编辑的HTML元素中键入？

Question

我需要以编程方式模拟用户在一个contenteditable HTML元素中键入的交互。

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

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

- Penguin

Answer 1

你可以使用Document.execCommand()与insertText命令，这也会自动触发input事件：

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相同）：

已过时

该功能已经过时。虽然它可能仍然在某些浏览器中工作，但使用它是不被鼓励的，因为它随时可能被移除。请尽量避免使用它。

- Danziger

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

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

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

- Alejandro De Cicco

Answer 3

如果您只需要模拟用户的输入，可以使用像 Puppeteer 这样的可编程浏览器。它是一个 Node.js 包，可以为您提供一个浏览器，您可以从代码中控制它，并且它恰好具备您所需的功能。您甚至可以控制打字的速度等。

以下是一个示例代码，它打开 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();

- Amir