JS + KeyboardEvent 模拟键盘事件组合键实现实例：上下键模拟为左右键；点击按钮模拟为shift+enter

最新推荐文章于 2023-08-06 20:22:48 发布

贝茵斯都

最新推荐文章于 2023-08-06 20:22:48 发布

阅读量1w

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40532650/article/details/110136180

版权

javascript 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

参考：

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部分：

<body>
    <div id="content">
      <div id="list"></div>
      <div>
        <iframe id="iframe" src="./index.html" onclick="ifClick"></iframe>
        <div id="set_div">
          <span id="catalog" title="目录"
            ><img src="./icons/index.png" alt="目录" class="imgIcon"
          /></span>
          <span id="prev_car" title="上一动画">&#8810;</span>
          <span id="prev" title="上一页">&#10148;</span>
          <span id="slideIndex"></span>
          <span id="next" title="下一页">&#10148;</span>
          <span id="next_car" title="下一动画">&#8811;</span>
          <span id="play_pause" title="播放/暂停"></span>
          <span id="fullScreen" title="全屏/退出全屏"></span>
        </div>
      </div>
    </div>

    <script src="./player.origin.js"></script>
  </body>

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);
    }
  };
}

贝茵斯都

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
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部分：&.
复制链接

扫一扫