Cannot initialize keyCode in keyboard event init method

Question

I am trying to simulate keyboard event (for F1 - F12) and dispatch that to an iframe (in text.xhtml). But when I try to initialize the event, keyCode does not change and shows its default value which is zero and so, it does not understand the pressed key is one of the F keys. What I want is to set the keyboard event's keyCode to F1-F12 keyCodes.

I have used this site's keyCodes also, but it didn't work too. And here says keyCode Property sets or retrieves the Unicode. But here says keyCode Property is read only. I am really confused and tired, because I am dealing with it for 3 days. Please help or ask me for any clarification.

Thanks in advance

Here is my test.html code:

<!DOCTYPE html>
<html>
<body>
 <script>
function EventHandler(e) {
    e = e || window.event;
    var code = typeof e.which !== 'undefined' ? e.which : e.keyCode; 
    if(code == 112 || code == 113 
        || code == 114 || code == 115
        || code == 116 || code == 117
        || code == 118 || code == 119
        || code == 120 || code == 121
        || code == 122 || code == 123) {
        e.returnValue = false;
        var target2 = document.getElementById("iFrameId"); 
        var targetBody = target2.contentDocument.body; 
        var keyboardEvent = document.createEvent("KeyboardEvent");
        var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

        keyboardEvent[initMethod](
                 "keydown", // event type : keydown, keyup, keypress
                 true, // bubbles
                 true, // cancelable
                 window, // viewArg: should be window
                     false, // ctrlKeyArg
                 false, // altKeyArg
                 false, // shiftKeyArg
                 false, // metaKeyArg
                 code, // keyCodeArg : unsigned long the virtual key code, else 0
                 0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
                );
        targetBody.dispatchEvent(keyboardEvent);        
        }
    }

</script>

    <form>
    <input type="text" name="first" onkeydown="EventHandler()" > <br>
    <iframe id="iFrameId" src="frame.html" > </iframe>
    </form>
    </body>
    </html>

and here is may frame.html code:

 <!DOCTYPE html>
 <html>
 <body onkeydown="FrameEventHandler(event)"  >
 <script>
function FrameEventHandler(e) {

    e = e || window.event; alert(e);
    var code = typeof e.which !== 'undefined' ? e.which : e.keyCode;

    if(code == 112 )
        alert("F1");
    else if (code == 113)
        alert("F2");
    else if (code == 114)
        alert("F3");
    else if (code == 115)
        alert("F4");
    else if (code == 116)
        alert("F5");
    else if (code == 117)
        alert("F6");
    else if (code == 118)
        alert("F7");
    else if (code == 119)
        alert("F8");
    else if (code == 120)
        alert("F9");
    else if (code == 121)
        alert("F10");
    else if (code == 122)
        alert("F11");
    else if (code == 123)
        alert("F12");
    }
  </script>     
   <form id="frameForm" >
    <p>This is Frame !!!<p> 
   </form>
  </body>
  </html>

By the way e.locale is returning the value that I want, but it is useless for me because I wouldn't be controlling the frame actually. — aylak

aylak aylak · Accepted Answer · 2012-10-18T10:36:57

Ok I have solved the problem with help of a discussion on stackoverflow which is available here. I am writing this answer for those who deal with the same problem. Now my code is like:

<!DOCTYPE html>
<html>
<body>
  <script>
  function EventHandler(e) {
    e = e || window.event;
    var code = typeof e.which !== 'undefined' ? e.which : e.keyCode; 
    if(code == 112 || code == 113 
        || code == 114 || code == 115
        || code == 116 || code == 117
        || code == 118 || code == 119
        || code == 120 || code == 121
        || code == 122 || code == 123) {
      e.returnValue = false;
      var target2 = document.getElementById("iFrameId"); 
      var targetBody = target2.contentDocument.body; 
      var keyboardEvent = document.createEvent("KeyboardEvent");

      Object.defineProperty(keyboardEvent, 'keyCode', {
        get : function() {
          return this.keyCodeVal;
        }
      });

      Object.defineProperty(keyboardEvent, 'which', {
        get : function() {
          return this.keyCodeVal;
        }
      });

      var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

      keyboardEvent[initMethod](
         "keydown", // event type : keydown, keyup, keypress
         true, // bubbles
         true, // cancelable
         window, // viewArg: should be window
         false, // ctrlKeyArg
         false, // altKeyArg
         false, // shiftKeyArg
         false, // metaKeyArg
         code, // keyCodeArg : unsigned long the virtual key code, else 0
         0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
      );
      keyboardEvent.keyCodeVal = code;
      targetBody.dispatchEvent(keyboardEvent);        
    }
  }
  </script>

  <form>
    <input type="text" name="first" onkeydown="EventHandler()" > <br>
    <iframe id="iFrameId" src="frame.html" > </iframe>
  </form>
</body>
</html>

Cannot initialize keyCode in keyboard event init method

1 Answers