Question

我正在尝试编写一些关于每个文档的例子/ bookmarklet / 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中尝试了“Log Events”（并通过一个整齐的小扩展程序检查了所有已注册的事件到Firebug，Eventbug）;似乎这些事件并没有在按键上发射。

编辑：
为了澄清[Tim]，我用screenshot做了一些注释......

我正在谈论的“编辑窗格”似乎是一堆显示我输入内容的Javascripted-up 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（”hello3！“）;”

Answer 3

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

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

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

在Javascript（Google Docs）中捕获按键

3 个答案: