小编典典

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

javascript

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

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

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

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

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


阅读 406

收藏
2020-05-01

共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规范尚未完成,并且知道此类操作通常需要多长时间才能完成。

2020-05-01