JS + KeyboardEvent 模拟键盘事件 组合键实现 实例：上下键模拟为左右键；点击按钮模拟为shift+enter |
您所在的位置：网站首页 › js实现自动点击 › JS + KeyboardEvent 模拟键盘事件 组合键实现 实例：上下键模拟为左右键；点击按钮模拟为shift+enter |
|
参考： js模拟键盘事件方法 (juejin.cn) 2016-1-20（document.createEvent事件模拟）_‘’小蜜峰‘’-CSDN博客 键盘事件 KeyboardEvent() - Web API 接口参考 | MDN (mozilla.org) 1.环境： doucment内部嵌套iframe 上下方向键模拟左右方向键，在iframe中收到事件,Google Chrome 版本 87.0.4280.66（正式版本） （64 位） 此方法对IE不友好 2.HTML部分： ≪ ➤ ➤ ≫3.JavaScript 部分主要代码 //iframe window var win = document.getElementsByTagName("iframe")[0].contentWindow.window; //浏览器版本 var network = navigator.userAgent.toLowerCase();01：将对象调整为iframe内部document；监听点击事件 window.onload = function () { //获取iframe document对象 var iframeDoc = document.getElementsByTagName('iframe')[0].contentWindow.document keyCodeChange(iframeDoc) } //监听点击事件 document.addEventListener("click", function (ev) { var iframeDoc = document.getElementsByTagName("iframe")[0].contentWindow .document; win.focus(); //焦点始终在ppt上 prevCarToon(iframeDoc); });02：监听键盘事件 //监听上下键转为左右键 function keyCodeChange(iframeDoc) { iframeDoc.onkeydown = function (event) { console.log('event===', event) var e = event || window.event || arguments.callee.caller.arguments[0] if (e && e.keyCode) { //next 下40\右39\down34;prev 上38\左37\up33 console.log('code========', e.keyCode) if (network.indexOf('trident') > -1) { //IE pageChange(e.keyCode) } else { if (e.keyCode === 38) { if (slideIndexNum !== 0) { fireKeyEvent(iframeDoc, 'keydown', 37) } } else if (e.keyCode === 40) { if (slideIndexNum === 0) { jumpPage(1) } else { fireKeyEvent(iframeDoc, 'keydown', 39) } } } } } }03：模拟键盘事件 //模拟键盘左右键 function fireKeyEvent(el, evtType, keyCode) { var doc = el //获取iframe window对象，键盘挂在到iframe的window上 var evtObj if (doc.createEvent) { if (win.KeyboardEvent) { //原方法中使用KeyEvents //但此方法虽模拟了左右键，但事件并非keybord触发，触发不到iframe中使用到的插件 //对比了原始左右键，和上下键模拟左右键，发现是触发事件不同导致 evtObj = doc.createEvent('KeyboardEvent') Object.defineProperty(evtObj, 'keyCode', { get: function () { return this.keyCodeVal }, }) Object.defineProperty(evtObj, 'which', { get: function () { return this.keyCodeVal }, }) if ((keyCode === 13 || keyCode === 16) && scp) { evtObj.initKeyboardEvent( evtType, true, false, win, false, false, false, true,//此处设置了shiftKey=true,IE中无效。。。 keyCode, 0 ); evtObj.keyCodeVal = keyCode; evtObj.shiftKey = true; console.log("evtObj==11", evtObj); } else { if (network.indexOf("trident") > -1) { //ie处理-_-，少参数报错。。 evtObj.initKeyboardEvent( evtType, true, false, win, false, false, false, false, keyCode, 0 ); evtObj.keyCodeVal = keyCode; } else { evtObj.initKeyboardEvent(evtType, true, true, win, 1); evtObj.keyCodeVal = keyCode; } } if (evtObj.keyCode !== keyCode) { console.log('keyCode ' + evtObj.keyCode + ' 和 (' + evtObj.which + ') 不匹配') } } 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) } }04：组合键触发事件 ** 组合键在IE中只会识别最后一次传入的按键 //页内小动画按钮 function prevCarToon(iframeDoc) { prevCarBtn.onclick = function () { if (slideIndexNum !== 0) { if (network.indexOf("trident") > -1) { //ie处理-_- fireKeyEvent(iframeDoc, "keydown", 37, false); } else { //shift + enter 组合键 console.log("shift + enter 组合键=="); fireKeyEvent(iframeDoc, "keydown", 16, true); fireKeyEvent(iframeDoc, "keydown", 13, true); } } }; nextCarBtn.onclick = function () { if (slideIndexNum === 0) { jumpPage(1, false, false); } else { //enter 键 fireKeyEvent(iframeDoc, "keydown", 13, false); } }; }
|
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |