JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等)
2016-09-08 15:23
686 查看
原文链接:http://blog.csdn.net/lovelyelfpop/article/details/52471878
最近代码中有个功能需要用到手动触发键盘事件的功能。但键盘事件的fire在各浏览器下实现不一样,下面分别说明:
1. IE下没什么问题,创建事件对象、对对象的keyCode属性赋值,然后再抛出来就行了:
2. Firefox 需要通过document.createEvent创建KeyEvents对象,再通过initKeyEvent方法对事件对象初始化
initKeyEvent 参考:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/initKeyEvent
3. Chrome/Safari/Opera
通过document.createEvent创建UIEvents对象,初始化后再在该对象上挂载按键值。
initUIEvent 参考:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent
Chrome和Opera可以先将keyCode属性delete掉后,再用Object.defineProperty方法重新为它赋值:
有些安卓浏览器,此法无效,需要用下面的方式:
最后,封装好的function大概就是这样:
使用方法: 假设模拟回车
最近代码中有个功能需要用到手动触发键盘事件的功能。但键盘事件的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);
相关文章推荐
- JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等)
- 模拟键盘鼠标事件----自己做外挂
- 使用SWT模拟鼠标键盘事件
- C#模拟键盘鼠标事件 SendKeys 的特殊键代码表
- javascript事件列表大全解说,点击事件,双击事件,触发事件,键盘事件,鼠标移...
- Android自动化测试初探(四): 模拟键盘鼠标事件(Socket+Instrumentation实现)
- Android 模拟键盘鼠标事件
- C#模拟键盘鼠标事件
- QTP模拟鼠标和键盘事件方法
- C#模拟键盘鼠标事件 SendKeys 的特殊键代码表
- 使用SWT模拟鼠标键盘事件
- 模拟鼠标键盘事件
- QTP模拟鼠标键盘事件
- javascript屏蔽鼠标、键盘事件
- javascript的鼠标键盘事件
- C#模拟键盘鼠标事件
- 【转】C#模拟键盘鼠标事件
- Android自动化测试初探(五): 再述模拟键盘鼠标事件(adb shell 实现)
- QTP模拟鼠标和键盘事件整理
- C#模拟键盘鼠标事件