如何用JS模拟真人键盘上的space按钮

Question

我想了解如何模拟 space 按钮在键盘上的点击，就像真人那样。我这里有一些例子。

第一个是使用 jsFiddle。 jsFiddle 只是为了让事情更简单，我会测试它，然后在我的项目代码中使用它。可以在下面找到链接。

我读过 new KeyboardEvent() 构造函数，但是，我认为它不能解决我的问题。也许我做错了什么，但我需要模拟按下 space 按钮，就像它是真实的一样。

我确定 document.getElementById('test').value += ' '; 没有做任何事情 "realistic"，它只是更改了 #text 元素的值。在示例之后，我将向您展示我希望它如何处理图像。

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

Stacksnippet:

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。

所以，我们刚刚重新加载了一个页面。不要在意不同的环境。这是我的项目代码，除了 jsFiddle 或 Stacksnippet 中的代码，您不应该关心任何 jQuery 或 JS 内容。

与 jsFiddle 或 Stacksnippet 中相同的代码在 codepen.com 完整代码的中间，在 "select" 事件中。

再说一次，你不需要去那里，但如果你想自己测试一下，那就去吧。

在搜索框中输入字符 "a"。

document.getElementById('test').value += ' '; 有效，现在我们在实际搜索框值之后有一个额外的 space。结果应该改变他们没有。它是使用代码完成的。

让我们尝试同样的事情，但没有 document.getElementById('test').value += ' '; 行或 jsFiddle 或 Stacksnippet 中的任何内容。我只是像真人一样把代码生成的space去掉了（在键盘上在关注搜索框的时候按回space

编辑 3 谢谢，成功了！我刚刚在 codepen here.

上有了这段代码的新分支

我对您的代码进行了一些更改，因此它可以解决我的问题，而不是打印每个字符，现在它可以非常快速地打印和删除 space。 setTimeout(..., 0); 是因为要等到 JS Stack 清空。

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);

可在 here（视频）中找到对此的解释。

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);

这是您示例的代码笔分支，使用此代码显示结果：https://codepen.io/kyledodge/pen/xYKmmy

如何用JS模拟真人键盘上的space按钮

How to simulate the space button like the real person on the keyboard using JS

javascript

keyboard-events