JavaScript 模拟键盘事件

2016年09月08日 15:23:25 神秘_博士 阅读数：41158 标签： javascript鼠标键盘事件模拟更多

个人分类： 其它

原文链接：http://blog.csdn.net/lovelyelfpop/article/details/52471878

最近代码中有个功能需要用到手动触发键盘事件的功能。但键盘事件的fire在各浏览器下实现不一样，下面分别说明：

1. IE下没什么问题，创建事件对象、对对象的keyCode属性赋值，然后再抛出来就行了：

evtObj = document.createEventObject();
evtObj.keyCode=keyCode
el.fireEvent('on'+evtType, evtObj);

2. Firefox 需要通过document.createEvent创建KeyEvents对象，再通过initKeyEvent方法对事件对象初始化

evtObj = document.createEvent('KeyEvents');
evtObj.initKeyEvent( evtType, true, true, window, false, false, false, false, keyCode, 0 );

initKeyEvent 参考：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/initKeyEvent

3. Chrome/Safari/Opera

通过document.createEvent创建UIEvents对象，初始化后再在该对象上挂载按键值。

evtObj = document.createEvent('UIEvents'); 
evtObj.initUIEvent( evtType, true, true, window, 1 );

initUIEvent 参考：https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent

Chrome和Opera可以先将keyCode属性delete掉后，再用Object.defineProperty方法重新为它赋值：

delete evtObj.keyCode;
Object.defineProperty(evtObj,"keyCode",{value:keyCode});

有些安卓浏览器，此法无效，需要用下面的方式：

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

最后，封装好的function大概就是这样:

function fireKeyEvent(el, evtType, keyCode){
        var doc = el.ownerDocument,
                win = doc.defaultView || doc.parentWindow,
                evtObj;
        if(doc.createEvent){
                if(win.KeyEvent) {
                        evtObj = doc.createEvent('KeyEvents');
                        evtObj.initKeyEvent( evtType, true, true, win, false, false, false, false, keyCode, 0 );
                }
                else {
                        evtObj = doc.createEvent('UIEvents');
                        Object.defineProperty(evtObj, 'keyCode', {
                        get : function() { return this.keyCodeVal; }
                    });     
                    Object.defineProperty(evtObj, 'which', {
                        get : function() { return this.keyCodeVal; }
                    });
                        evtObj.initUIEvent( evtType, true, true, win, 1 );
                        evtObj.keyCodeVal = keyCode;
                        if (evtObj.keyCode !== keyCode) {
                        console.log("keyCode " + evtObj.keyCode + " 和 (" + evtObj.which + ") 不匹配");
                    }
                }
                el.dispatchEvent(evtObj);
        } 
        else if(doc.createEventObject){
                evtObj = doc.createEventObject();
                evtObj.keyCode = keyCode;
                el.fireEvent('on' + evtType, evtObj);
        }
}

使用方法： 假设模拟回车

fireKeyEvent(input元素, 'keydown', 13);