title: jquery listen for events in an iframe
body: <p>I'm making a very simple Rich Text Editor using jquery... I don't want to use a third-party one.</p>
  
  <p>I need to listen for events within an iframe (same domain etc), starting with typing. Apparently I'll need to use bind() a lot.</p>
  
  <p>This is what I've got at the moment which works fine in IE8 (amazingly enough) but not Chrome.</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
      $('#text').contents().bind("keyup keydown keypress", function(e) {
          var code = e.keyCode || e.which;
          alert(code);
          return false;
      });
  });
  &lt;/script&gt;
  
  &lt;body&gt;
      &lt;iframe id="text" name="text" src="edit.html"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>On the key press event above, I will also want to get the current value of 'edit.html' and update a textarea with that value...</p>
  
  <p>Any help would be MUCH appreciated :)</p>
  
  <p>Many thanks</p>
  
  <p>EDIT: to explain further, edit.html is an editable file using <code>"document.body.contentEditable = true;"</code></p>
  
  <p>-</p>
  
  <p>EDIT 2:</p>
  
  <p>edit.html = </p>
  
  <pre><code>&lt;script language="javascript"&gt;
      function InitializeIFrame() {
          document.body.contentEditable = true;                         
      } 
  
  &lt;/script&gt;
  &lt;html&gt;
  &lt;body onload="InitializeIFrame();"&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>