在自定义输入字段中输入数据

Question

我的扩展程序具有一个包含项目的上下文菜单。我想要做的是：右键单击editablehtml元素（例如，输入或文本区域），然后选择并单击菜单中的某个项目时-
由扩展名定义的某些值将输入到输入中。

目前，我已经意识到document.activeElement.value = myValue。
简单的输入就可以了。

当存在具有自定义onChange事件处理的输入（例如日历或电话输入或货币输入）时，问题就开始了，这些输入以某种方式转换了用户输入。
由于我直接在元素上设置了一个值-省略了处理逻辑，这会引起各种问题。

由于javascript不允许使用类似KeySend的功能-我在这里有哪些选择？

我曾经考虑过使用Puppeteer或Cypress之类的测试工具-
但它们似乎都无法打包到扩展中。Puppeteer确实具有这样的选项，但是仍然需要运行一个节点实例才能连接。而且，我希望自己的扩展程序完全是客户端程序，并在Chrome网络商店中分发-
因此，我不能要求我的用户运行启动节点服务器。

Answer 1

有一个内置的DOM方法document.execCommand。 如果是扩展名，请在内容脚本中使用此代码。

document.querySelector('some.selector').focus();
document.execCommand('insertText', false, 'new text')

它会将物理用户输入模拟
为当前关注的DOM元素，因此将在字段设置为true的情况下触发所有必需的事件（如beforeinput，，input因此，change如果适用）isTrusted。

您可能希望选择当前文本以完全替换它，而不是附加：

replaceValue('some.selector', 'new text');

function replaceValue(selector, value) {
  const el = document.querySelector(selector);
  if (el) {
    el.focus();
    el.select();
    document.execCommand('insertText', false, value);
  }
  return el;
}

请注意，execCommand在2020年被标记为已过时，但是它将在可预见的将来工作，因为新的编辑API规范尚未完成，并且知道此类操作通常需要多长时间才能完成。