在自定义处理的输入字段中输入数据 [英] Enter data into a custom-handled input field

问题描述

我的扩展程序具有一个包含项目的上下文菜单.我想要做的是:右键单击editable html元素(例如input或textarea)，然后选择并单击菜单中的一项时-由扩展名定义的一些值输入到输入中.

My extension has a context menu with items. What I'd like it to do: is when I right-click an editable html element (eg input or textarea) and then select and click on an item in my menu - some value defined by my extension gets entered into the input.

目前，我已经意识到document.activeElement.value = myValue.
通过简单的输入，它就可以正常工作.

For now I have realised that with document.activeElement.value = myValue.
With simple inputs it works alright.

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

Problems start when there is an input with custom onChange event handling, eg a calendar or a phone input, or currency input - that transforms user-input in some way.
Since I am setting a value directly onto the element - the handling logic gets omitted, which causes all manner of problems.

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

Since javascript doesn't allow for KeySend-like features - what are my options here?

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

I have thought about testing tools like Puppeteer or Cypress - but they all seem not to be packageable into an extension. Puppeteer does have such an option, but it still requires a node instance running to connect to. And I would like my extension to be solely client-sided and distributed in Chrome webstore - so I cannot ask my users to run spin up a node server.

推荐答案

有一个内置的DOM方法内容脚本中使用此代码.

There is a built-in DOM method document.execCommand.
In case of an extension, use this code in the content script.

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

Note, execCommand was marked as obsolete in 2020 but it'll work in the foreseeable future because a new editing API specification is not finished yet, and knowing how slow such things usually move it may take another 5-20 years.

// 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的情况下触发所有必要的事件(如beforeinput，input).在某些页面上，应另外分派change事件，如上所示.

It imitates physical user input into the currently focused DOM element so all the necessary events will be fired (like beforeinput, input) with isTrusted field set to true. On some pages the change event should be additionally dispatched as shown above.

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

You may want to select the current text to replace it entirely instead of appending:

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;
}

这篇关于在自定义处理的输入字段中输入数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！