使用全屏模式时禁用键盘

时间:2019-03-27 09:08:24

标签: javascript html

我正在关注this method禁用键盘事件。但这仅适用于输入表单。 我只想在全屏模式处于活动状态时用户不能使用键盘。 这是我的摘录codepen.io/adityadees/pen/Jzqmpy

  document.onkeydown = function (e) {
        return false;
}
<body onload="document.documentElement.webkitRequestFullScreen();">
  <h1>Lock</h1> 
  
  <textarea></textarea>
</body>

1 个答案:

答案 0 :(得分:0)

F11和ESC将起作用

 <html>
    <head>
    <title>Page Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function ()
    {
     $(document).keydown(function (event) {
            return false;
        });
    });
    document.oncontextmenu = function (e)        //check for the right click
    {
        return false;
    }
    document.ondragstart = function (e)
    {
        return false;
    }

    function toggleFullScreen() {

                                        var docElm = document.documentElement;
                                        if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
                                            if (docElm.requestFullscreen) {
                                                docElm.requestFullscreen();
                                            }
                                            else if (docElm.mozRequestFullScreen) {
                                                docElm.mozRequestFullScreen();
                                            }
                                            else if (docElm.webkitRequestFullScreen) {
                                                docElm.webkitRequestFullScreen();
                                            }
                                        }
                                        else {


                                            if (document.exitFullscreen) {
                                                document.exitFullscreen();
                                            }
                                            else if (document.mozCancelFullScreen) {
                                                document.mozCancelFullScreen();
                                            }
                                            else if (document.webkitCancelFullScreen) {
                                                document.webkitCancelFullScreen();
                                            }



                                        }
                                    }

    </script>
    </head>
    <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <input type=text id="text"/>
    <button onclick="toggleFullScreen()" value="toggleFullScreen" name="toggleFullScreen">toggleFullScreen</button>

    </body>
    </html>