[英]How can I programmatically simulate typing in a contenteditable HTML element?
I need to simulate the interaction of a user typing into a contenteditable
HTML element programmatically.我需要以编程方式模拟用户键入内容可编辑contenteditable
元素的交互。
I cannot use things such as HTMLElement.onkeypress()
or HTMLElement.fire()
.我不能使用诸如HTMLElement.onkeypress()
或HTMLElement.fire()
之类的东西。
I cannot modify the actual code or content of the element using element.innerHTML
or element.textContent
, I need a way to simulate it.我无法使用element.innerHTML
或element.textContent
修改元素的实际代码或内容,我需要一种模拟它的方法。
You could use Document.execCommand()
with the insertText
command , which will also fire input
events automatically:您可以将Document.execCommand()
与insertText
command一起使用,它也会自动触发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>
However, note that's currently obsolete and even before it was inconsistent across different browser (same as contenteditable
):但是,请注意,它目前已经过时,甚至在它在不同浏览器之间不一致之前(与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.尽量避免使用它。
You can do something like this:你可以这样做:
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>
It seems like an user is slowly typing in the div.似乎用户正在慢慢输入 div。 You can tweak the speed by changing the 500
argument.您可以通过更改500
参数来调整速度。
If you just need to simulate a user's input, you can use scriptable browsers like puppeteer.如果您只需要模拟用户的输入,则可以使用 puppeteer 等可编写脚本的浏览器。 It is a nodejs package, it gives you a browser that you can control from your code, and it has exactly the thing you need.它是一个 nodejs package,它为您提供了一个可以从您的代码中控制的浏览器,它正是您需要的东西。 You can even control the speed of typing, etc.您甚至可以控制打字速度等。
Here is a sample code that opens a google page and enters the text "Hello world:D" in the search box这是一个示例代码,它打开一个谷歌页面并在搜索框中输入文本“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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.