Chrome中的Keydown Simulation通常会触发,但不会触发正确的键

Question

我想在html页面中模拟给定textarea元素上的keydown事件.因为我正在使用chrome,所以我调用initKeyboardEvent了我的变量,并将我想要输入的keyCode传递给了textarea.这是我尝试过的:

var keyEvent = document.createEvent('KeyboardEvent');
keyEvent.initKeyboardEvent('keydown', true, false, null, 0, false, 0, false, 77, 0);
inputNode.dispatchEvent(keyEvent);

在这段代码中,我正在键入字母,m但textarea只获取keyCode 13,这是Enter键.所以,我尝试了一个我在网上看到的覆盖代码,它将值设置为keyCodeVal,但没有成功

var keyEvent = document.createEvent('KeyboardEvent');
Object.defineProperty(keyEvent, 'keyCode', { 
                         get : function() {
                                 return this.keyCodeVal;
                         }
                        });
keyEvent.initKeyboardEvent('keydown', true, false, null, 0, false, 0, false, 77, 0);
keyEvent.keyCodeVal = 77;
inputNode.dispatchEvent(keyEvent);

有谁知道如何设置keyCode值？

Answer 1

非常非常接近......

你只需要覆盖'which'属性.这是一些示例代码:

Podium = {};
Podium.keydown = function(k) {
    var oEvent = document.createEvent('KeyboardEvent');

    // Chromium Hack
    Object.defineProperty(oEvent, 'keyCode', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     
    Object.defineProperty(oEvent, 'which', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     

    if (oEvent.initKeyboardEvent) {
        oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, false, false, false, false, k, k);
    } else {
        oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, k, 0);
    }

    oEvent.keyCodeVal = k;

    if (oEvent.keyCode !== k) {
        alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");
    }

    document.dispatchEvent(oEvent);
}

样品用法:

Podium.keydown(65);

注意:此代码不适用于IE,Safari或其他浏览器.好吧,也许是Firefox.因人而异.

Answer 2

Orwellophile的解决方案确实有效.

• 首先:'keyCode','charCode'和'which'只在Safari和IE9 +中读取(至少).
• 第二:initKeyboardEvent有点乱.所有浏览器都以不同的方式实现它.即使在webkit中,也有几种不同的initKeyboardEvent实现.并且在Opera中没有"好"的方式来实现initKeyboardEvent.
• 第三:不推荐使用initKeyboardEvent.您需要使用initKeyEvent或KeyboardEvent构造函数.

在这里我写了一个跨浏览器的initKeyboardEvent函数(gist):

例:

var a = window.crossBrowser_initKeyboardEvent("keypress", {"key": 1, "char": "!", shiftKey: true})
alert(a.type + " | " + a.key + " | " + a.char + " | " + a.shiftKey)

这是我的DOM键盘事件级别3 polyfill与跨浏览器KeyboardEvent构造函数.

例:

var a = new KeyboardEvent("keypress", {"key": 1, "char": "!", shiftKey: true})
alert(a.type + " | " + a.key + " | " + a.char + " | " + a.shiftKey)

例2

例3

重要说明1:charCode,keyCode以及不推荐使用的属性.所以我的crossBrowser_initKeyboardEvent没有任何KeyboardEvent构造函数在某些浏览器中绝对保证该属性的正确值.您可以使用属性"key"和"char"来编辑我的要点,以强制在具有只读charCode,keyCode和哪些属性的浏览器中使用initEvent.

重要说明2:不推荐使用keypress事件,现在我的Keyboard事件级别3 polyfill不支持.这意味着keypress事件中的key和char属性可以具有随机值.我正在努力解决这个问题以向后兼容.