Question

我正在使用Chrome扩展程序，其内容脚本在指定的操作中在网页中注入一堆元素，包括text类型的输入元素。

问题在于，在Facebook的主页上，听取键盘输入（例如， P ），扩展程序的输入元素失去焦点，去了Facebook＆＃34;你的想法是什么？＆＃34;在 P 的情况下的部分。

我尝试将注意力集中在输入元素的程序上，虽然这似乎是部分有效的，因为它需要重点关注你的想法？＆＃34;＆＃34;一节，它仍然没有将'P'写入文本字段。

无论如何都有解决方法吗？

更新＃0：我尝试重新获得焦点的代码非常简单：

searchBar.onblur = searchBar.focus;

更新＃1：我的输入元素位于影子DOM内。显然，当元素不属于影子DOM时，它不会失去焦点。关于如何使用shadow DOM的任何想法？

Answer 1

查看此示例。除非站点阻止事件的传播，否则您可以在最高级别（即文档）上侦听键盘事件。

document.addEventListener('keypress', function(e) {
    console.log(e);
}, false);

document.getElementById('text3').addEventListener('keypress', function(e) {
    console.log(e);
}, false);

<textarea id="text1"></textarea>
<textarea id="text2"></textarea>
<textarea id="text3"></textarea>
<textarea id="text4"></textarea>

Answer 2

我不使用Facebook;你是说当有人输入P时，会导致焦点转移到＆＃34;你的想法是什么？＆＃34;因为如果事件序列是按键 - > Facebook关注焦点 - ＆gt;你重点关注，当你的输入字段有焦点时，按键没有发生，因此键入的字母不会显示出来。

您可能必须通过听按键，检查他们是否错过输入字段，将键码转换为相应的字母，然后将其附加到输入中，将这些字母放入您输入的值中。值。

Answer 3

我最终将我的输入元素放在阴影根之外，因为正如@Kammy Liu在他的评论中指出的那样

事件被重新定位，看起来像是来自主机元素而不是Shadow DOM的内部元素

see more！

有没有办法在侦听它的网页上输入键盘输入？

3 个答案: