无法在键盘事件init方法中初始化keyCode

时间:2012-10-17 15:05:00

标签: javascript event-handling keyboard-events

我正在尝试模拟键盘事件(对于F1 - F12)并将其发送到iframe(在text.xhtml中)。但是当我尝试初始化事件时,keyCode不会改变并显示其默认值为零,因此,它不理解按下的键是F键之一。我想要的是将键盘事件的keyCode设置为F1-F12 keyCodes。

我也使用过这个网站的keyCodes,但它也没有用。 这里说keyCode Property设置或检索Unicode。但是这里说keyCode Property是只读的。我真的很困惑和累,因为我正在处理它3天。请帮助或询问我任何澄清。

提前致谢

这是我的test.html代码:

<!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>

这里可能是frame.html代码:

 <!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>

1 个答案:

答案 0 :(得分:0)

好的,我已经通过讨论stackoverflow available here解决了这个问题。我正在为那些处理同样问题的人写这个答案。现在我的代码就像:

<!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>