在自定义处理的输入字段中输入数据 [英] 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屋!