Capturer la touche en Javascript (Google Docs)

Question

J'essaie d'écrire un petit script greasemonkey/bookmarklet/qu'avez-vous pour Google Docs. La fonctionnalité que j'aimerais ajouter nécessite un gestionnaire d'événement keypress/keyup/keydown (l'un de ces trois). Malheureusement, Javascript n'est pas mon forté, et je n'arrive pas à capturer (?) Un événement keypress dans le volet d'édition. En dernier recours, je l'ai essayé ce qui suit:

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!");}; 
    } 
})(); 

Cependant, cela ne fonctionne toujours pas capturer dans le volet appui sur les touches d'édition - aucune alerte agaçants (bien qu'il semble fonctionner pour la plupart d'autres sites ...) . J'ai vérifié dans Chrome et Firefox tous les deux (je ne peux pas l'obtenir pour travailler dans l'un ou l'autre).

J'ai essayé "Log Events" dans Firebug (et vérifié tous les événements enregistrés via une petite extension de Firebug, Eventbug); il ne semblait pas que ces événements tiraient sur les touches.

Edit:
Pour clarifier [Tim], je fait ce screenshot avec quelques annotations ...

Le je parle "panneau d'édition" au sujet semble être un tas de divs Javascripted-up afficher ce que je tape.

Des idées? Merci!

Answer 1

La modification dans Google Documents utilise une iframe. Vous devez attacher un écouteur au document iframe. Il semble faire quelque chose de compliqué avec le iframe, je ne l'ai pas encore été en mesure de travailler pleinement, mais ce qui suit semble fonctionner pour Firefox:

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

Answer 2

Cela semble fonctionner pour moi ... mais j'utilise jQuery $ (document) .ready() pour m'assurer que ma page est chargée avant d'attacher n'importe quel événement. Je pense que vous pouvez le faire en javascript nu avec:

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

D'ailleurs vous ne pouvez pas attacher plus d'une fonction à l'événement:

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!");}; 
} 

L'élément n'enregistre que le dernier (il remplace la fonction précédente), dans ce cas "alert (" hello3! ");"

Answer 3

Vous n'avez pas besoin d'attacher l'écouteur à tous les éléments de la page. Pour l'attacher au document est suffisant.

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

Comme il est un script Greasemonkey vous n'avez pas à vous soucier de IE et peut utiliser la méthode addEventListener.