亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 JavaScript 中發送字母數組的按鍵

如何在 JavaScript 中發送字母數組的按鍵

冉冉說 2023-07-14 16:50:24
我正在嘗試想出一種解決方案,可以虛擬按鍵進行打字測試。我想要的是獲取文本并將各個字母存儲在數組中,然后按下所有鍵,每次按下之間有一些延遲。這是文本布局的 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 放入按鍵中?
查看完整描述

1 回答

?
德瑪西亞99

TA貢獻1770條經驗 獲得超3個贊

這是解決方案。


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>


查看完整回答
反對 回復 2023-07-14
  • 1 回答
  • 0 關注
  • 170 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號