javascript - 以编程方式模拟空格键，然后在文本输入字段上退格

Question

我想在文本输入字段上调度用户操作。我希望它就像一个真实的人使用键盘单击文本输入字段，按空格键，然后按退格键。使用我使用的代码没有发生任何事情。

JSFIDDLE https://jsfiddle.net/zvrhfq9j/

HTML

<input type="text" name="psychTree-savedNodes" style="width:20%" />

JS

$('input[name="psychTree-savedNodes"]').focus();
$('input[name="psychTree-savedNodes"]').trigger({type: 'keypress', which: 32, keyCode: 32});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keyup', which: 32, keyCode: 32});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keydown', which: 32, keyCode: 32});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keypress', which: 8, keyCode: 8});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keyup', which: 8, keyCode: 8});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keydown', which: 8, keyCode: 8});

解决方案:实际调度事件。感谢那些真正回答的人!

Answer 1

您可以模拟用户操作，但它们不会执行默认功能，因为它会将 isTrusted 设置为 false(出于安全原因)。

例如，您可以构建一个事件来分派(dispatch)到“键入字母 'a'”的文本字段。它将(错误，应该)触发绑定(bind)到该事件处理程序的任何自定义函数 (el.onkeydown(e){ if( e.key == 'a' ) ... )，但它不会在文本字段中输入字母a，或者根据该击键处理默认浏览器功能。

这是一个浏览器实现，您无法绕过它。因此，虽然您无法直接在字段中“键入”，但您可以基于附加到这些特定事件的事件处理程序来运行事件。

我制作了一个 codepen 示例来展示我的意思:https://codepen.io/xhynk/pen/jOPbWzz

• 页面加载为蓝色，有 2 个字段
• 在 1 秒内，它将运行一个函数来“模拟”“点击 > 空格 > 退格”事件链。
• 事件将显示它们在“否”输入中所做的事情
• 页面变成绿色表示它已关闭。

如果您愿意，可以将事件代码更改为字母，以确保实际的击键永远不会出现在"is"输入中。我添加了“否”框，其中包含 keydown 和 onclick 事件处理程序，通过更改 value 来显示触发的事件以及触发的顺序其中。

您还可以手动单击"is"输入，然后单击“空格”和“退格”，然后看到它们也触发事件处理函数(事件函数将像模拟时一样运行)但是这次它们将实际出现在框中(因为您实际上做了它们，所以它们是可信事件)。

长话短说，您无法完全模拟受信任的“键入”按键事件，但是您可以按照您想要的方式处理这些特定的按键事件(甚至可以更改当前输入的值，如果你自己选择)。

编辑:我看到顶部出现了一系列评论。这是一个您无法绕过的浏览器功能，除非您找到(或构建)一个可以处理不受信任的 isTrusted:false 事件的浏览器。这与本地或沙箱编程环境没有任何关系。