Question

我想知道如何模拟键盘上的空格键点击，就像真人会这样做一样。我在这里有一些例子。

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

我已经了解了new KeyboardEvent()构造函数，但是，我认为它不会解决我的问题。也许我做错了什么，但我需要模仿空间按钮按下就像它是真的一样。

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

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

Stacksnippet：

＆＃13;

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

＆＃13;

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

＆＃13;

我的完整项目代码可以在这里找到：https://codepen.io/Kestis500/pen/ddbwpq。

因此，我们只是重新加载了一个页面。不要关心不同的环境。这是我的项目代码，除了jsFiddle或Stacksnippet中的代码之外，你不应该关心任何jQuery或JS的东西。

与jsFiddle或Stacksnippet中相同的代码位于codepen.com完整代码的中间，内部＆＃34;选择＆＃34;事件

同样，你不需要去那里，但如果你想自己测试一下，那就继续吧。

输入字符＆＃34; a＆＃34;进入搜索框。

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

让我们尝试相同的事情，但没有document.getElementById('test').value += ' ';行或jsFiddle或Stacksnippet中的任何内容。我刚刚删除了像真人一样的代码生成的空间（当我专注于搜索框时，键盘按下了退格键。

编辑3 谢谢，它有效！我只是在codepen here上有一个新代码。

我已经对您的代码进行了一些更改，因此它适用于我的问题，而不是打印每个字符，现在它打印并快速删除空间。 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 += ' ';一样），然后发送剩余代码正在观看的任何事件或事件来更新自动完成结果。< / p>

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 fork，其中包含此代码以显示结果：https://codepen.io/kyledodge/pen/xYKmmy

如何使用JS

2 个答案: