如何在 JavaScript 中发送字母数组的按键

Question

我正在尝试想出一种解决方案，可以虚拟按键进行打字测试。我想要的是获取文本并将各个字母存储在数组中，然后按下所有键，每次按下之间有一些延迟。这是文本布局的 HTML。想象一下它有这个词hello。<div class="digit-container">    <div>        <span>h</span>    </div></div><div class="digit-container">    <div>        <span>e</span>    </div></div><div class="digit-container">    <div>        <span>l</span>    </div></div><div class="digit-container">    <div>        <span>l</span>    </div></div><div class="digit-container">    <div>        <span>o</span>    </div></div>这是我想出的 JavaScript 代码。我已经设法将这些字母存储在一个数组中。wordList = document.querySelectorAll(".digit-container > div > span");wordArray = [];for (let i = 0; i < wordList.length; i++) {    individualWord = wordList[i].innerHTML;    wordArray.push(individualWord);}现在我希望 JavaScript 发送这个字母数组 { "h", "e", "l", "l", "o" } 的按键。基本上，当我粘贴此代码并在控制台中按 Enter 键时，我希望 JavaScript 在击键之间有几毫秒的延迟按“Hello”。如何将 JavaScript 放入按键中？

Answer 1

这是解决方案。

const elements = document.querySelectorAll(".digit-container > div > span");

const chars = Array.from(elements).map((item) => item.textContent);

const delay = 1000;

let i = 0;

const pressKey = () => {

  setTimeout(() => {

    const char = chars[i];

    const event = new KeyboardEvent("keyup", {

      key: char

    });

    document.body.dispatchEvent(event);

    if (i !== chars.length - 1) {

      i++;

      pressKey();

    }

  }, delay);

};

pressKey();

document.body.addEventListener("keyup", (e) => {

  console.log(e.key);

});

<div class="digit-container">

    <div>

        <span>h</span>

    </div>

</div>

<div class="digit-container">

    <div>

        <span>e</span>

    </div>

</div>

<div class="digit-container">

    <div>

        <span>l</span>

    </div>

</div>

<div class="digit-container">

    <div>

        <span>l</span>

    </div>

</div>

<div class="digit-container">

    <div>

        <span>o</span>

    </div>

</div>