Javascript 在自定义处理的输入字段中输入数据

我的分机有一个带有项目的上下文菜单。我希望它做的是：当我右键单击一个

可编辑的
html元素（例如输入或文本区域），然后选择并单击我菜单中的一个项目时，一些由扩展名定义的值被输入到输入中

现在我已经意识到，使用
document.activeElement.value=myValue


只需简单的输入，就可以正常工作

当有一个带有自定义
onChange
事件处理的输入时，就会出现问题，例如日历或电话输入，或货币输入-以某种方式转换用户输入。

因为我直接在元素上设置了一个值，所以忽略了处理逻辑，这会导致各种各样的问题

既然javascript不允许类似KeySend的特性，那么我的选项是什么

我曾经考虑过像Puppeter或Cypress这样的测试工具，但它们似乎都无法打包到扩展中。Puppeter确实有这样一个选项，但它仍然需要运行一个节点实例来连接。我希望我的扩展是完全客户端的，并分布在ChromeWebStore中，所以我不能要求我的用户运行一个节点服务器
 有一个内置的DOM方法。

如果是扩展，请在中使用此代码

请注意，execCommand在2020年被标记为过时，但在可预见的未来它将工作，因为新的编辑API规范尚未完成，要知道这些东西通常运行得有多慢，可能还需要5-20年的时间

// some.selector may be `input` or `[contenteditable]` for richly formatted inputs
const el = document.querySelector('some.selector');
el.focus();
document.execCommand('insertText', false, 'new text');
el.dispatchEvent(new Event('change', {bubbles: true})); // usually not needed

它将模拟物理用户输入到当前关注的DOM元素中，因此所有必要的事件都将被触发（如
在输入之前
，
输入
），且
isTrusted
字段设置为true。在某些页面上，
change
事件应如上所示进行额外调度

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

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

function replaceValue(selector, value) {
  const el = document.querySelector(selector);
  if (el) {
    el.focus();
    el.select();
    if (!document.execCommand('insertText', false, value)) {
      // Fallback for Firefox: just replace the value
      el.value = 'new text';
    }
    el.dispatchEvent(new Event('change', {bubbles: true})); // usually not needed
  }
  return el;
}

有一个内置的DOM方法。

如果是扩展，请在中使用此代码

请注意，execCommand在2020年被标记为过时，但在可预见的未来它将工作，因为新的编辑API规范尚未完成，要知道这些东西通常运行得有多慢，可能还需要5-20年的时间

// some.selector may be `input` or `[contenteditable]` for richly formatted inputs
const el = document.querySelector('some.selector');
el.focus();
document.execCommand('insertText', false, 'new text');
el.dispatchEvent(new Event('change', {bubbles: true})); // usually not needed

它将模拟物理用户输入到当前关注的DOM元素中，因此所有必要的事件都将被触发（如
在输入之前
，
输入
），且
isTrusted
字段设置为true。在某些页面上，
change
事件应如上所示进行额外调度

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

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

function replaceValue(selector, value) {
  const el = document.querySelector(selector);
  if (el) {
    el.focus();
    el.select();
    if (!document.execCommand('insertText', false, value)) {
      // Fallback for Firefox: just replace the value
      el.value = 'new text';
    }
    el.dispatchEvent(new Event('change', {bubbles: true})); // usually not needed
  }
  return el;
}

@wOxxOm您可能应该将其转换为答案，以便将其标记为已解决。@wOxxOm您可能应该将其转换为答案，以便将其标记为已解决。