javascript - 全屏时捕捉键盘输入似乎不起作用

标签 javascript keyboard fullscreen three.js

我正在使用 Three.js 制作游戏,我需要获得用户输入。我有两个处理函数;

function press(evt) 
{
    console.log(evt);

    //evt = window.event;
    var code = evt.which || evt.keyCode;

    switch(code) 
    {
        case KEY.W: input.up = true; break;
        case KEY.A: input.left = true; break;
        case KEY.S: input.down = true; break;
        case KEY.D: input.right = true; break;
        case KEY.E: input.e = true; break;
        case KEY.Z: input.z = true; break;
        case KEY.ONE: input.one = true; break;
        case KEY.CTRL: input.ctrl = true; break;
        case KEY.P: input.plus = true; break;
        case KEY.M: input.minus = true; break;
        case KEY.SH: input.shift = true; break;
    }
}

function release(evt)
{
    console.log(evt);

    //evt = window.event;
    var code = evt.which || evt.keyCode;

    switch(code) 
    {
        case KEY.W: input.up = false; break;
        case KEY.A: input.left = false; break;
        case KEY.S: input.down = false; break;
        case KEY.D: input.right = false; break;        
        case KEY.E: input.e = false; break;
        case KEY.Z: input.z = false; break;
        case KEY.ONE: input.one = false; break;
        case KEY.CTRL: input.ctrl = false; break;
        case KEY.P: input.plus = false; break;
        case KEY.M: input.minus = false; break;
        case KEY.SH: input.shift = false; break;
    }
}

这两个我都在其他项目中使用过,而且效果很好。这就是我附加事件监听器的方式:

document.addEventListener("keydown", press, false);
document.addEventListener("keyup", release, false);

这在网站正常加载时有效,但在网站全屏时无效!

这是 init() 中的 while 设置;在 body onload 事件上调用的函数:

        var init = function()
        {
            started = false;
            isFullscreen = false;

            changeFSState = function()
            {
                if (isFullscreen == true)
                {
                    isFullscreen = false;

                    game.stop(); //lol
                }
                else
                {
                    isFullscreen = true;
                }
            }

            container = document.getElementById("container");
            document.body.appendChild(container);

            document.addEventListener("keydown", press, false);
            document.addEventListener("keyup", release, false);

            document.addEventListener("webkitfullscreenchange", changeFSState, false);
            document.addEventListener("mozfullscreenchange", changeFSState, false);

            game = new Game(container);
        }

单击播放 按钮后,会发生这种情况:

    THREEx.FullScreen.request(self.container);  
    self.renderer.setSize(screen.width, screen.height);

现在,正如我所说,在我单击 play 按钮(实际上是一个链接)之前,捕获输入一直有效,然后控制台就停止记录事件,就好像它们没有发生一样。

最佳答案

THREEx.FullScreen似乎正在使用此代码:

element.webkitRequestFullScreen();

你需要的是:

element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

好像this is Chrome-only虽然。

关于javascript - 全屏时捕捉键盘输入似乎不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10754521/

相关文章:

javascript - Material-UI 中的 zDepth 不起作用 (React.js)

php - 您可以通过电子邮件从网页发送文件吗

iOS 如何使 inputaccessoryview 中的 TextView 成为第一响应者?

html - 使 div 100% 浏览器窗口的宽度

javascript - Firefox for Android 输入文件 onchange 在使用相机时不会触发

javascript - 函数定义中的 "...args"(三个点)是什么意思?

java - 自动显示键盘

c# - 在 C# 中捕获键盘笔画

java - JFrame全屏对焦。

iphone - 如何像 facebook iphone 应用程序一样全屏打开图像?