如何通过JS向页面中存在的可编辑元素插入值？

Question

我正在开发一个 chrome 扩展，我在其中对页面中的可编辑元素使用上下文菜单。我获取了已执行右键单击的元素，现在我想在该输入元素中插入一个值。

我尝试使用简单的： document.activeElement.value="value"; .

在这种情况下，将插入值，但它不会完全复制用户的键入操作。

例如：当用户至少输入一个字符时，保存按钮将被启用。但是当我们使用 document.activeElement.value 插入时，保存按钮将不会被启用。它需要在输入元素外部额外手动单击，或者需要在输入区域内手动按下其他键。

我尝试使用 KeyboardEvent 来模拟右箭头键的按下，但仍然无效。

还有其他方法可以实现吗？

Background.js 片段：

    let myPromise = new Promise(function(myResolve, myReject) {
    var ele=mycallback(info,tab);
    myResolve(ele);
  });
  myPromise.then(
    function(value){
    });
} );
chrome.contextMenus.create({
  title: "Length",
  parentId: "tool",
  contexts:["editable"],
  id:"length"
});
chrome.contextMenus.create({
  title: "1 character",
  parentId: "length",
  contexts:["editable"],
  id:"1character"
});
function mycallback(info, tab) {
chrome.tabs.sendMessage(tab.id, info.menuItemId, {frameId: info.frameId}, data => {
    return data.value;
});
}

Content.js 片段：

var clickedEl = null;

document.addEventListener("contextmenu", function(event){
    clickedEl = event.target;
}, true);

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  document.activeElement.value="";
switch(request){
  case '1character':
  document.activeElement.value="Q";
  break;
}
sendResponse({value: clickedEl.value});
});

下面是手动输入和编程插入的区别：

手册： works fine

当我们以编程方式填充时： Needs a click outside the area or some key press to show suggestions

Answer 1

您需要在 DOM 树中向上传播您的更改，这正是 Event bubbling 发挥作用的地方。
想知道什么是事件冒泡？给你，
W3 参考 bubbles Event Property
MDN 参考 Event bubbling and capture

注意：Event bubbling可能很有用，但也可能导致意外问题。

下面的代码片段将满足您的需求 -

document.activeElement.value="Q";
document.activeElement.dispatchEvent(new Event('input', { bubbles: true }));

如何通过JS向页面中存在的可编辑元素插入值？

How to insert a value into a editable element present in a page through JS?

html

javascript

google-chrome