是否存在用于模拟元素的键盘操作的跨浏览器 JavaScript 库？答案

【问题标题】：Does there exist a cross-browser JavaScript library for simulating keyboard manipulation of an element?是否存在用于模拟元素的键盘操作的跨浏览器 JavaScript 库？
【发布时间】：2022-02-08 19:43:00
【问题描述】：

我非常了解浏览器的标准事件触发机制，但我需要一个 JavaScript 库，该库将通过键盘模拟光标和插入点导航。特别是，我需要一个库，它允许我移动插入点，但如果在使用虚拟箭头键导航时“按下”虚拟 shift 键，也可以处理扩展或折叠文本选择范围。是否存在这样的跨浏览器 JavaScript 库？

这是为了在浏览器自动化库中使用，所以像 Selenium 这样的建议是不合适的。此外，如果可能的话，我想避免依赖于大型 JavaScript 框架（如 jQuery）的库。最后，这需要在页面中注入，因此非 JavaScript 解决方案无法满足我的要求。

假设我有一个看起来像这样的 HTML 页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>keyboard</title>
</head>
<body>
  <input id="editor" value="hello world" />
</body>
</html>

我希望能够在 JavaScript 中调用类似这样的东西：

function moveCursor() {
  var editor = document.getElementById("editor");
  editor.focus();

  // Hypothetical API here. This would need to be
  // adjusted to be used with the actual library.
  // Assume the pressKey() is defined as:
  //
  //   pressKey(element, keyCode, isShiftPressed)
  //
  keyboardSimulator.pressKey(editor, keys.END);
  keyboardSimulator.pressKey(editor, keys.LEFT, true);
  keyboardSimulator.pressKey(editor, keys.LEFT, true); 
}

调用此 JavaScript 函数后，我希望页面中的焦点位于编辑器元素上，并且选择“hello world”值中的“ld”。

【问题讨论】：

标签： javascript dom-events ui-automation

【解决方案1】：

实际上有个库可以做这些事情。

其中一个叫做 Syn，包含在 bitovi FuncUnit 中：

http://funcunit.com

https://github.com/bitovi/syn

【讨论】：

【解决方案2】：

不存在这样的库。如果真的允许，这将是一个巨大的安全漏洞。您唯一能做的就是捕获击键并对其进行操作，例如创建特殊热键，当捕获时触发您在javascript 中创建的一些特殊功能。

（顺便说一句：一些扩展，如 Lastpass 和 Lazarus，看似将击键发送到控件，实际上只是设置了 text 属性。）

【讨论】：

然而，通过非常巧妙地操作选择范围和设置文本属性，是可以模拟这种行为。我认为这不会构成安全风险。我希望有人已经完成了处理边缘情况的工作，以使这种模拟更加稳健。
嗯，这是一个有趣的角度。如果您遇到某些问题或自己制定解决方案，请告诉我。（一直在寻找新的自动化技术:)
是的，我一定会的。根据 YUI 上的这个页面，link，FireFox 将愉快地插入关键事件。我很确定 Bitovi Syn 可能是目前最好的实用解决方案，但事实证明它很难集成到我的 Ember js 应用程序中。