如何为 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" } 的按键。基本上，当我粘贴此代码并在控制台中按回车键时，我希望 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>

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

How to send keypresses for an array of letters in JavaScript

html

javascript

jquery

automation