Question

我正在使用以下jquery插件在我的网络应用中启用全屏。

https://github.com/martinaglv/jQuery-FullScreen

效果很好，但是当我处于全屏模式时，我的textarea是不可编辑的？为什么是这样？它是浏览器还是插件？

它似乎没有以任何方式被禁用......

我的测试代码如下：

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://raw.github.com/martinaglv/jQuery-FullScreen/master/fullscreen/jquery.fullscreen.js"></script>
</head>
<body>
    <div id="content">
        <textarea></textarea>
        <button>
            Go Go Fullscreen</button>
    </div>
    <script type="text/javascript">
        (function () {

            if ($.support.fullscreen) {

                $('button').click(function (e) {

                    $('#content').fullScreen();

                });
            }

        })();
    </script>
</body>
</html>

Answer 1

有一种解决方法（至少对Chrome来说），但我不知道它是如何影响你正在使用的插件。您必须传递一些指令以允许键盘输入：

document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

<强>更新

您可以非常轻松地修改插件。此功能将更改以反映上述内容：

function requestFullScreen(elem){
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen();
    }
}

默认情况下，插件强制浏览器进入全屏模式而不允许键盘输入。

来自MDN的{p> More information here和the thread我找到了一些线索。

Answer 2

从教程：

允许开发人员以编程方式占用用户屏幕的想法并非没有严重的安全隐患，这就是键盘使用受限的原因。当然，全屏键盘输入有许多合法用途，将在未来的API版本中通过某种权限提示来解决。

然而，即使是目前有限的形式，API仍然为我们提供了增强最终用户体验的机会。

在某些浏览器中甚至没有全屏显示，例如IE 9。

http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/

为什么textarea在全屏模式下无法编辑？

2 个答案: