自定义IE浏览器的键盘事件，兼容IE8至IE11

  阻止默认行为，自定义IE浏览器的键盘事件/快捷键

　　以下案例包含f1-f12,以及alt + z和ctrl + z的组合键。

　　有需要的可以直接复制代码到编辑器中运行试试。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <!-- 注意这里的accessKey -->
    <input type="text" id="inp">
    <button accessKey='z' id="inpEvent">按钮</button>

    <script src="./4.js"></script>
  </div>
</body>
</html>

JavaScript部分

// 禁用IE浏览器F3的默认事件
window.onhelp = function () {
  return false;
}
var inp = window.document.getElementById('inp')
var inpEvent= window.document.getElementById('inpEvent')

// Alt + Z accessKey触发
inpEvent.onclick = function() {
  alert('Alt + Z  accessKey触发');
}

// 检测全局键盘事件
window.document.onkeydown = function (e) {
  // Ctrl + Z
  if(window.event.keyCode == 90 && window.event.ctrlKey ) {
    alert('ctrl + Z');
  }
  // F1-F12事件
  switch (window.event.keyCode) {
    case 112: { alert('F1'); stopEvents(e); break;}
    case 113: { alert('F2'); inp.focus(); stopEvents(e); break;}
    case 114: { alert('F3'); stopEvents(e); break;}
    case 115: { alert('F4'); stopEvents(e); break;}
    case 116: { alert('F5'); stopEvents(e); break;}
    case 117: { alert('F6'); stopEvents(e); break;}
    case 118: { alert('F7'); stopEvents(e); break;}
    case 119: { alert('F8'); stopEvents(e); break;}
    case 120: { alert('F9'); stopEvents(e); break;}
    case 121: { alert('F10'); stopEvents(e); break;}
    case 122: { alert('F11'); stopEvents(e); break;}
    case 123: { alert('F12'); stopEvents(e); break;}
    default: break;
  }
}

// 阻止默认的事件
function stopEvents(e) {
  if(e) {
    e.stopPropagation();
    e.preventDefault();
  } else{
      window.event.returnValue = false;
      window.event.cancelBubble = true;
      window.event.keyCode = 0;
    }
}

　　案例中如有不足或者错误之处，望大家给予评论，多多指正。

posted @ 2021-02-19 11:19  Huge-C₄  阅读(128)  评论(0)    收藏  举报