javascript - 如何在 contenteditable div 上模拟打字？

Question

根据我在此 thread 的问题，现在我遇到了如何在 contenteditable div 中模拟输入的问题。

div标签如下:

<div tabindex="-1" class="input-emoji">
    <div class="input-placeholder" style="visibility: visible;">Type a message</div>
    <div class="input" contenteditable="true" data-tab="1" dir="auto" spellcheck="true"></div>
</div>

为了模拟打字，我的js代码如下:

setTimeout(() => {
    try {
        let inputContainerEl = chatPanelEl[0].getElementsByClassName('input-container');
        let input = inputContainerEl[0].getElementsByClassName('input');

        let message = 'Something to type';
        console.log('MESSAGE: ' + message);
        let chars = message.split('');
        for (let n = 0; n < chars.length; n++) {
            let charCode = chars[n].charCodeAt(0);
            console.log('CHAR: ' + chars[n] + ' => CODE: ' + charCode);

            let keypressEvent = document.createEvent('KeyboardEvent');
            keypressEvent.initKeyboardEvent('keypress', true, true, window, false, false, false, false, charCode, charCode);
            input[0].dispatchEvent(keypressEvent);

            let keydownEvent = document.createEvent('KeyboardEvent');
            keydownEvent.initKeyboardEvent('keydown', true, true, window, false, false, false, false, charCode, charCode);
            input[0].dispatchEvent(keydownEvent);

            let keyupEvent = document.createEvent('KeyboardEvent');
            keyupEvent.initKeyboardEvent('keyup', true, true, window, false, false, false, false, charCode, charCode);
            input[0].dispatchEvent(keyupEvent);
        }
    } catch(err) {
        console.log('ERROR: ' + err);
    }
}, 1000);

我已经在这里检查了一些线程，关于从普通 javascript 执行 keydown、keypress 和 keyup 事件。但似乎没有任何效果。

我尝试使用基于 selenium 的解决方案，它的效果很好(阅读下面的代码)

public void run() {
    try {
        WebElement container = driver.findElement(By.className("input-container"));
        if (container != null) {
            WebElement input = container.findElement(By.className("input"));
            if (input != null) {
                input.sendKeys("ECHO: " + this.echo);
                Thread.sleep(2000);
                WebElement submitBtn = driver.findElement(By.className("compose-btn-send"));
                if (submitBtn != null) {
                    submitBtn.click();
                }
            }
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}

但由于我无法使用 selenium(由于项目要求)，我不得不改用 Cefsharp。

因此，如果有人知道如何在 vanilla javascript 中执行 selenium "sendKeys" 方法，请帮助我。

谢谢。

Answer 1

这个解决方案适合我:

element.dispatchEvent(new InputEvent('textInput', {data: keyChar, bubbles: true}));

element 是内容可编辑的 div，keyChar 当然是关键字符 ;)