如何用 JS 模擬鍵盤按下“全棧”？

Question

我已經閱讀並嘗試了這個問題的解決方案，但它們都沒有像我預期的那樣工作。

在下面的代碼片段中，我注冊了兩個事件偵聽器，並看到兩個回調都作為對input和document上的keydown事件的響應而觸發。

但是，我的期望是，當這行代碼運行時，會在輸入中輸入一個額外的文本， a .

input.dispatchEvent(keyEvent);

換句話說，我希望使用KeyboardEvent作為參數在input元素上調用dispatchEvent應該將文本添加到輸入中，但它不會。

它確實調用了在 eventListener 中注冊的回調。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input id="input">

  <script>
    const input = document.getElementById('input')

    input.addEventListener('keydown', (e) => {
      console.log('Keydown on Input: ', e.key)
    })
    document.addEventListener('keydown', (e) => {
      console.log('Keydown on Doc: ', e.key)
    })

    function focusInputThenFireEventKeyboardEvents() {
      input.value = 'I want '
      input.focus()
      input.dispatchEvent(new Event('focus'));
      input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
      input.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'}));
      var keyEvent = new KeyboardEvent("keydown", { key: "a", char: "a", shiftKey: true });
      var keyEvent2 = new KeyboardEvent("keydown", { key: "d", char: "d", shiftKey: true });
      input.dispatchEvent(keyEvent);
      document.dispatchEvent(keyEvent2);
    }
    setTimeout(focusInputThenFireEventKeyboardEvents, 500)
  </script>
</body>

</html>

Answer 1

您可以在此處查看文檔 - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent表示鍵盤事件表示用戶與鍵盤上的鍵的交互，並且為了處理您需要使用的文本輸入輸入事件。即使您調度像 const input.dispatchEvent(new Event("input", {"bubbles":true, "cancelable":false})) 這樣的事件，這並不意味着它會更改輸入，但您可以使用它來以編程方式設置輸入的值。

如何用 JS 模擬鍵盤按下“全棧”？

問題描述

1 個解決方案

解決方案1
0 2020-07-09 12:53:48

如何用 JS 模擬鍵盤按下“全棧”？

問題描述

1 個解決方案

解決方案1 0 2020-07-09 12:53:48

解決方案1
0 2020-07-09 12:53:48