物理键F11的更改应用。

最新推荐文章于 2022-04-27 15:31:18 发布

前进的探索者

最新推荐文章于 2022-04-27 15:31:18 发布

阅读量236

点赞数

分类专栏：前端 F11按键文章标签： F11 物理键

本文链接：https://blog.csdn.net/b0303/article/details/103486670

版权

前端同时被 2 个专栏收录

44 篇文章 1 订阅

订阅专栏

F11按键

2 篇文章 0 订阅

订阅专栏

获取键盘F11的按钮的应用。看到晚上有多中方式，测试多个之后，找到这个方式，能在进入全屏和退出全屏时都能检测到F11物理键的操作。

下面是完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
      $(document).on('keydown', function (e) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode == 122){//捕捉F11键盘动作
          e.preventDefault();  //阻止F11默认动作
          var el = document.documentElement;
          var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API
          //执行全屏
          if (typeof rfs != "undefined" && rfs) {
            rfs.call(el);
          } else if(typeof window.ActiveXObject != "undefined"){
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript!=null) {
              wscript.SendKeys("{F11}");
            }
          }
          //监听不同浏览器的全屏事件，并件执行相应的代码
          document.addEventListener("webkitfullscreenchange", function() {//
            if (document.webkitIsFullScreen) {
              //全屏后要执行的代码
              // console.log("全屏文件 webkitIsFullScreen")
              $(window).resize(function(){
                setTimeout(function(){
                  window.location.reload();
                  console.log("全屏文件 webkitIsFullScreen")
                },1000)
              })
            }else{
              //退出全屏后执行的代码
              console.log("退出来了  webkitIsFullScreen")
              setTimeout(function(){
                window.location.reload();
                console.log("退出来了  webkitIsFullScreen  qwqee")
              },1000)
            }
          }, false);

          document.addEventListener("fullscreenchange", function() {
            if (document.fullscreen) {
              //全屏后执行的代码
              console.log("全屏文件 fullscreen")
            }else{
              //退出全屏后要执行的代码
              console.log("退出来了   fullscreen")
            }
          }, false);

          document.addEventListener("mozfullscreenchange", function() {
            if (document.mozFullScreen) {
              //全屏后要执行的代码
              console.log("全屏文件 mozFullScreen")
            }else{
              //退出全屏后要执行的代码
              console.log("退出来了  mozFullScreen")
            }
          }, false);

          document.addEventListener("msfullscreenchange", function() {
            if (document.msFullscreenElement) {
              //全屏后要执行的代码
              console.log("全屏文件")
            }else{
              //退出全屏后要执行的代码
              console.log("退出来了")
            }
          }, false)
        }
      })
    </script>
</head>
<body>
    <div id="ck_buts">
      时间是
    </div>
</body>
</html>

这是另外一种方式检测F11按键（只能检测到第一次按下的结果，退出时检测不到按键信息）这个方式可以获取不同的按键，如果不知道按键的编码请自己百度，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <meta charset="UTF-8">
  <TITLE>js 按键记录</TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
  var keystring = "";//记录按键的字符串
  function $(s) { return document.getElementById(s) ? document.getElementById(s) : s; }
  function keypress(e) {
    var currKey = 0, CapsLock = 0, e = e || event;
    currKey = e.keyCode || e.which || e.charCode;
    CapsLock = currKey >= 65 && currKey <= 90;
    switch (currKey) {
      //屏蔽了退格、制表、回车、空格、方向键、删除键
      case 8: case 9: case 13: case 32: case 37: case 38: case 39: case 40: case 46: keyName = ""; break;
      default: keyName = String.fromCharCode(currKey); break;
    }
    keystring += keyName;
  }
  function keydown(e) {
    var e = e || event;
    var currKey = e.keyCode || e.which || e.charCode;
    if ((currKey > 7 && currKey < 14) || (currKey > 31 && currKey < 47) || (currKey > 121 && currKey < 123)) {
      switch (currKey) {
        case 8: keyName = "[退格]"; break;
        case 9: keyName = "[制表]"; break;
        case 13: keyName = "[回车]"; break;
        case 32: keyName = "[空格]"; break;
        case 33: keyName = "[PageUp]"; break;
        case 34: keyName = "[PageDown]"; break;
        case 35: keyName = "[End]"; break;
        case 36: keyName = "[Home]"; break;
        case 37: keyName = "[方向键左]"; break;
        case 38: keyName = "[方向键上]"; break;
        case 39: keyName = "[方向键右]"; break;
        case 40: keyName = "[方向键下]"; break;
        case 46: keyName = "[删除]"; break;
        case 122: keyName = "[F11]"; break;
        default: keyName = ""; break;
      }
      keystring += keyName;
    }
    $("content").innerHTML = keystring;
  }
  function keyup(e) {
    $("content").innerHTML = keystring;
  }
  document.onkeypress = keypress;
  document.onkeydown = keydown;
  document.onkeyup = keyup;
</script>
<input type="text" />
<input type="button" value="清空记录" οnclick="$('content').innerHTML = '';keystring = '';" />
<br />请按下任意键查看键盘响应键值：<span id="content"></span>
</BODY>
</HTML>

前进的探索者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
物理键F11的更改应用。

获取键盘F11的按钮的应用。看到晚上有多中方式，测试多个之后，找到这个方式，能在进入全屏和退出全屏时都能检测到F11物理键的操作。下面是完整的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</tit...
复制链接

扫一扫

专栏目录