为什么 textarea 在全屏模式下不可编辑？答案

【问题标题】：Why is textarea not editable in fullscreen mode?为什么 textarea 在全屏模式下不可编辑？
【发布时间】：2012-09-05 12:23:42
【问题描述】：

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

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

效果很好，除了当我处于全屏模式时，我的文本区域不可编辑？为什么是这样？是浏览器还是插件？

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

下面是我的测试代码：

 <!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>

【问题讨论】：

标签： javascript jquery html fullscreen

【解决方案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();
    }
}

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

More information here 来自 MDN，the thread 在那里我找到了一些线索。

【讨论】：

【解决方案2】：

来自教程：

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

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

在某些浏览器中，它甚至不能全屏显示，例如 IE 9。

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

【讨论】：