使用 javascript 捕获键盘敲击并在 setTimeout 后重播所有敲击答案

【问题标题】：Capture keyboard strokes using javascript and replay all of them after a setTimeout使用 javascript 捕获键盘敲击并在 setTimeout 后重播所有敲击
【发布时间】：2015-10-30 02:51:15
【问题描述】：

我有一个要求，我需要捕获用户按下的所有键，并在延迟后在浏览器中重放相同的键。例如>如果我在一个表单中有 3 个文本字段，则只有 field-1 将被启用并专注于页面加载。字段 1 有一个 fousout 事件，它将在 10 秒后启用字段 2 和字段 3。现在用户在不看屏幕的情况下执行以下操作。

字段 1 中“XYZ”中的用户键。
然后立即按“TAB”键。
“123”键
按“TAB”键
“XYZ123”中的键
按“ENTER”键

所有这些都在 10 秒内完成。我已经为 TAB 和 ENTER 完成了 evt.preventDefault() ，这样它就不会提交表单或远离文档的选项卡。 - 如何在 10 秒后模拟上述击键？

我希望结果与用户键入的顺序相同。即 - 将值“123”添加到字段 2 - 最重要的是调用浏览器 TAB 键功能！ - 添加然后将值“XYZ123”添加到字段 3 等等..on.

这是否可以使用 javascript 实现？例如存储所有按键事件并在 10 秒后一一触发？

【问题讨论】：

如果您有记录按键发生在哪个元素以及发生了哪些按键，您应该可以做到这一点

标签： javascript jquery

【解决方案1】：

诚然，我不确定我是否完全理解了您的问题，但是如果您停止输入一秒钟，此 vanilla.js 示例将输出您输入的内容：

'use strict';

var logged = [];
var timer;
var timeout = 1000;

document.body.addEventListener('keyup', function (event) {
  clearTimeout(timer);
  
  var character = String.fromCharCode(event.which);
  logged.push(character);
  
  timer = setTimeout(function () {
    document.body.innerHTML = logged.join('');
  }, timeout);
});

Start typing...

如果没有别的，也许它会让你知道如何解决你的问题。

【讨论】：

但是我如何模拟 tab 事件或 Shift+tab 事件？使用相同的示例，我希望光标在 1 秒超时后移动到下一个“可聚焦”元素。换句话说：在 1 秒后调用浏览器默认的“选项卡”功能。
由于各种安全原因，我似乎无法使用自定义脚本模拟本机选项卡键事件。 fire-tab-keypress-event-in-javascript

【解决方案2】：

也许这就是你要找的东西：jQuery Key Press Event

您想将击键附加到一个数组，然后做任何您想做的事情:)

这个问题也可能有帮助 How to find out what character key is pressed?

【讨论】：