如何使用JS像鍵盤上的真實人物一樣模擬空格鍵

Question

我想找出如何像真實的人那樣模擬鍵盤上的空格鍵單擊。 我這里有一些例子。

第一個是使用jsFiddle。 jsFiddle只是為了簡化事情，我將對其進行測試，然后在我的項目代碼中使用它。 鏈接可以在下面找到。

我已經了解了新的KeyboardEvent（）構造函數，但是，我認為它不能解決我的問題。 也許我做錯了事，但是我需要像真實的那樣模擬按下空格鍵。

我確定document.getElementById('test').value += ' '; 沒有做任何“現實的”事情，它只是改變了#text元素的值。 在示例之后，我將向您展示如何使用它處理圖像。

---

這是我的jsFiddle示例： https ://jsfiddle.net/od5g4u43/。

堆棧片段：

 document.getElementById('test').addEventListener('keydown', function(ev) { document.getElementById('test').value += ' '; }); (function() { var e = new Event('keydown'); e.which = e.keyCode = 32; // 32 is the keycode for the space bar document.getElementById('test').dispatchEvent(e); })(); 

 <input id="test" type="text" value="opa!"> 

我的完整項目代碼可以在這里找到： https : //codepen.io/Kestis500/pen/ddbwpq 。

---

1. 因此，我們只是重新加載了頁面。 不在乎不同的環境。 這是我的項目代碼，除了jsFiddle或Stacksnippet中的代碼外，您不需要關心任何jQuery或JS東西。

   與jsFiddle或Stacksnippet中相同的代碼位於codepen.com完整代碼的中間，位於“ select”事件內。

   同樣，您不需要去那里，但是如果您想自己進行測試，請繼續。

2. 在搜索框中輸入字符“ a”。

3. document.getElementById('test').value += ' '; 起作用，現在我們在實際的搜索框值之后還有一個額外的空間。 結果應該改變而他們沒有。 這是使用代碼完成的。

4. 讓我們嘗試相同的操作，但不使用document.getElementById('test').value += ' '; 行或jsFiddle或Stacksnippet中的任何內容。 我只是刪除了由代碼生成的空間，就像真實的人一樣（當我專注於搜索框時，在鍵盤上按了退格鍵。

編輯3謝謝，它起作用了！ 我只是在這里的Codepen上有了這段代碼的新分支。

我對您的代碼進行了一些更改，以便它可以解決我的問題，而不是打印每個字符，現在它可以快速打印和刪除空格。 setTimeout(..., 0); 是因為要等到JS堆棧清除為止。

function updateSearchField() {
  t0 = performance.now();
  $("#search").focus();
  //update the search field with a character and
  //trigger the keypress event for the autocomplete
  $("#search")
    .val($("#search").val() + " ")
    .keydown();
  t1 = performance.now();
}

setTimeout(function() {
  updateSearchField();

  setTimeout(function() {
    var $text = $("#search").val();
    $("#search").val($text.substring(0, $text.length - 1));
  }, t1 - t0);
  console.log(t1 - t0);
}, 0);

可以在這里找到說明（視頻）。

Answer 1

分派的事件的行為方式與實際用戶操作不同-它們只會觸發事件（以便事件偵聽器可以對其進行響應）。 輸入字段上分派的keydown事件不會更改該字段的值，它只會觸發該事件本身。

您需要直接更改字段的值（就像處理document.getElementById('test').value += ' '; ）一樣，然后分派剩下的代碼正在等待更新的任何一個或多個事件自動完成結果。

Answer 2

您這里發生了一些事情。 首先，您不能像在做的那樣簡單地設置值-您要做的是分別設置每個字符，每次更新之間都有超時。 這將顯示用戶鍵入的外觀。 其次，您使用的是Jquery UI自動完成功能，每次更新后都需要按鍵事件，以告知自動完成功能刷新其搜索結果。 這是一個快速的解決方案，可以解決您所尋找的問題。

  function showDemo() {
    //give focus to the search field
    $("#search").focus();

    //the search content split into a string array
    var characters = "anarchist symbolism".split("");
    //the time between each character keypress
    var timeout = 0;

    characters.forEach(function(character) {
      //setup a random keypress time in milliseconds to simulate a real user typing
      timeout += Math.floor(Math.random() * 670);

      setTimeout(function() {
        //update the search field for this character at this 
        //timeout interval
        updateSearchField(character);
      }, timeout);
    });
  }

  function updateSearchField(character) {
    //update the search field with a character and 
    //trigger the keypress event for the autocomplete
    $("#search")
      .val(function(i, val) {
        return val + character;
      })
      .keypress();

    //intialize a keydown event with any key code to setup the keypress listener
    var e = jQuery.Event("keydown");
    e.which = 32; 
    $("#search").trigger(e);
  }

您也可能不希望立即開始，尤其是對於Codepen示例中的動畫。 您可能想通過超時來延遲開始時間：

//wait 4 seconds before initializing the demo. This can be anything,
//just to give the user time so it does not happen immediately
setTimeout(showDemo, 4000);

這是您的示例的Codepen分支，其中包含以下代碼以顯示結果： https ://codepen.io/kyledodge/pen/xYKmmy