which key was pressed on iframe in design mode

Question

 <script type="text/javascript">
    $(function() {
        $("#resizable").resizable().draggable();
        $('#resizable').append('<iframe id="rte" width="100%" height="100%" ></iframe>');

        myeditor = document.getElementById("rte").contentWindow.document;
        myeditor.designMode = "on";

        $('#rte').bind('keypress', function(e) {
            var code = (e.keyCode ? e.keyCode : e.which);
            alert(code);
            return false;
        });
    });
 </script>

In the script above i create an iframe and set it to design mode. now i need to know which keys where pressed, so i bind a keypress event to iframe. but that doesnt work :( is there a way to do it?

Answer 1

to avoid browser security issues, try making the iframe src a real (but empty) page, and do the keypress code inside the iframe page, but have the function calling out to its parent.

Answer 2

You can use contents() to get to the iframe document, and jQuery also normalizes the which property of keypress events, so there's no need to examine the keyCode property:

$('#rte').contents().keypress(function(e) {
    alert(e.which);
    return false;
});