有没有办法在监听它的网页上获取键盘输入？答案

【问题标题】：is there a way to get keyboard input on a webpage that listens for it?有没有办法在监听它的网页上获取键盘输入？
【发布时间】：2015-10-05 11:00:48
【问题描述】：

我正在开发一个 Chrome 扩展程序，它的内容脚本会在指定操作上在网页中注入一堆元素，包括文本类型的输入元素。

问题在于，在像 Facebook 主页这样的网页上，它监听键盘输入（例如，P），扩展的输入元素失去焦点，这进入 Facebook 的“你在想什么” ？” P 部分。

我尝试以编程方式将焦点重新返回到输入元素，虽然这似乎部分有效，因为它会将焦点从“你在想什么？”部分，它仍然不会将'P' 写入文本字段。

有没有办法解决这个问题？

更新#0：我尝试重新获得焦点的代码就这么简单：

searchBar.onblur = searchBar.focus;

更新 #1： 我的输入元素位于影子 DOM 中。显然，当它不是影子 DOM 的一部分时，该元素不会失去焦点。关于如何让它与 shadow DOM 一起工作的任何想法？

【问题讨论】：

您能否向我们展示您如何尝试重新获得焦点的代码？
也许你在函数的事件中有一个 preventDefault 或 return 。分享您的代码，我们不是巫师或女巫。
@Luke 添加了代码。
为什么不监听整个文档的键盘事件？
@Luke 我其实是。我在$(document) 上使用jQuery 的keydown。

标签： javascript input google-chrome-extension

【解决方案1】：

我不使用 Facebook；你是说当有人键入 P 时，会导致焦点转移到“你在想什么？”因为如果事件序列是按键 --> Facebook 获得焦点 --> 您收回焦点，则在您的输入字段获得焦点时不会发生按键，因此不会显示键入的字母。

您可能必须自己将这些字母放入输入值中，方法是听按键，检查它们是否错过了输入字段，将键码转换为适当的字母，并将其附加到输入值中。

【讨论】：

是的。当有人点击 P 时，焦点会转移到 Facebook 的“你在想什么？”。值得一提的是，keydown 在我的输入集中于时被触发。然而 facebook 的页面设法窃取焦点，我最终没有在我的输入中输入 P。我希望手动处理是最后尝试的解决方案。
我试图在我自己的扩展中复制它，但我没有遇到这个问题。我已经从内容脚本中注入了一个输入字段，正在输入 Ps 并且焦点没有丢失。
我的输入元素是影子 DOM 的一部分。但你是对的。如果它不在影子 DOM 内，它就可以工作。即使输入在影子 DOM 内，如何保持它的工作有什么想法吗？
这可能是相关的：stackoverflow.com/questions/24480808/…。 “事件被重新定位，看起来像是来自宿主元素而不是 Shadow DOM 的内部元素。”这可能是关键事件没有出现在输入中的原因；它们是否像来自主机节点一样被处理？

【解决方案2】：

看看这个例子。您可以在最高级别（即文档）侦听键盘事件，除非站点阻止事件传播。

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>

【讨论】：

文档不是chrome扩展的最高级别
你可能是对的。我不知道 Chrome 扩展的观点。