如何以编程方式输入一个可满足的HTML元素。

Question

我需要模拟用户在输入一个 contenteditable HTML元素进行编程。

我不能使用诸如 element.onkeypress() 或 element.fire().

我不能修改元素的实际代码或内容，使用 element.innerHTML 或 element.textContent.

我需要一种方法来模拟打入它。

顺便说一下，这是为youtube准备的。

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):

过时

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

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 参数。

Answer 3

如果你只是需要模拟用户的输入，你可以使用可脚本的浏览器，比如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();