Захватывать нажатие клавиш в Javascript (Google Docs)

Question

Я пытаюсь написать небольшой скрипт / букмарклет greasemonkey / что у тебя есть для Google Docs. Функциональность, которую я хотел бы добавить, нуждается в обработчике события нажатия клавиши / 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); не похоже, чтобы эти события запускались при нажатии клавиш.

Редактировать:
Чтобы уточнить [Тим], я сделал этот скриншот с некоторыми аннотациями ...

«Панель редактирования», о которой я говорю, похоже, представляет собой кучу Javascripted-up-дивов, отображающих то, что я печатаю.

Есть идеи? Спасибо!

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

Вам не нужно прикреплять слушателя ко всем элементам на странице.Чтобы прикрепить его к документу достаточно.

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

Поскольку это скрипт GreaseMonkey, вам не нужно беспокоиться о IE, и он может использовать метод addEventListener.

Answer 3

Кажется, работает для меня ... но я использую 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! ");"