在 Javascript 中捕获按键（Google 文档）

Question

我正在尝试编写一个小greasemonkey 脚本/书签/你有什么Google 文档。我想添加的功能需要一个 keypress/keyup/keydown 事件处理程序（这三个之一）。不幸的是，Javascript 不是我的强项，而且我似乎无法在编辑窗格中捕获（？）按键事件。作为最后的手段，我尝试了以下方法：

javascript:(function(){
  els = document.getElementsByTagName("*");
  for(i=0;i<els.length;i++){
    els[i].onkeypress=function(){alert("hello!");};
    els[i].onkeyup=function(){alert("hello2!");};
    els[i].onkeydown=function(){alert("hello3!");};
  }
})();

但是，这仍然无法捕获编辑窗格中的按键 - 没有烦人的警报（尽管它似乎适用于大多数其他网站......）。我已经检查了 Chrome 和 Firefox（我无法让它在任何一个中工作）。

我在 Firebug 中尝试了“记录事件”（并通过 Firebug 的一个简洁的小扩展，Eventbug 检查了所有注册的事件）；这些事件似乎并不是在按键时触发的。

编辑：
为了澄清[Tim]，我制作了这个带有一些注释的屏幕截图...

我所说的“编辑窗格”似乎是一堆显示我输入内容的 Javascripted div。

有什么想法吗？谢谢！

Answer 1

在 Google 文档中进行编辑使用 iframe。您需要将侦听器附加到 iframe 的文档。它似乎对 iframe 做了一些复杂的事情，我还没有完全解决，但以下似乎适用于 Firefox：

var iframe = document.getElementsByTagName("iframe")[0];
if (iframe) {
    iframe.contentDocument.addEventListener("keypress", function(evt) {
        console.log("iframe keypress: " + evt.which);
    }, false);
}

Answer 2

似乎对我有用...但我使用 jQuery $(document).ready() 来确保在附加任何事件之前加载我的页面。
我认为你可以用裸JavaScript来做到这一点：

window.onload = function()
{
  els = document.getElementsByTagName("*");
  for(i=0;i<els.length;i++) {
    els[i].onkeypress=function(){alert("hello!");};
  }
}

顺便说一句，你不能将多个函数附加到事件：

for(i=0;i<els.length;i++){
    els[i].onkeypress=function(){alert("hello!");};
    els[i].onkeypress=function(){alert("hello2!");};
    els[i].onkeypress=function(){alert("hello3!");};
}

该元素将仅注册最后一个函数（它覆盖前一个函数），在本例中为“alert(”你好3！");"

Answer 3

您不需要将侦听器附加到页面上的所有元素。将其附加到文档中就足够了。

window.addEventListener('load', function() {
    document.addEventListener('keypress', function() { alert("hello!"); });
}

由于它是 GreaseMonkey 脚本，因此您无需担心 IE，并且可以使用 addEventListener 方法。