如何在全屏游戏聚焦时触发未聚焦/后台Chrome窗口/标签页的按键输入

需求实现结论 #

纯浏览器环境运行的网页无法实现该需求，原因如下：

• 浏览器的键盘事件仅在浏览器进程/当前网页标签处于系统焦点状态时才能接收到输入事件，当全屏游戏占用系统焦点时，所有按键输入会直接被游戏进程接收，不会传递给后台的浏览器
• 你当前的代码还将按键事件绑定到了input输入框元素上，额外需要输入框处于聚焦状态才能触发事件，就算浏览器有焦点也需要先点击输入框才能生效

现有代码优化（浏览器内可用场景） #

如果仅需要浏览器激活状态下不用点击输入框就能触发，可以将事件绑定到document对象上，修改后的代码如下：

<body>
    <div class="container">
        <input type="text" class="keyboard" />
    </div>
    <!-- 注意：代码依赖jQuery，请确保已提前引入对应依赖 -->
    <script>
        $(document).ready(function () 
        {
            function tts ()
            {
                var msg = new SpeechSynthesisUtterance('Hello World!');
                msg.volume = .75;
                window.speechSynthesis.speak(msg);
            }
    
            // 绑定到document对象，无需聚焦输入框即可触发
            document.addEventListener('keyup', e =>
            {
                console.log(e)
                // keyCode属性已被官方废弃，建议用e.key === '4'判断，监听空格则写e.key === ' '
                if(e.keyCode == 52)
                {
                    tts()
                }
            })

        });
    </script>
</body>

可实现全局触发的替代方案 #

如果必须要全屏游戏焦点下也能触发，可以选择以下方案：

• 用AutoHotkey编写简单的全局热键脚本，触发后执行对应操作，或者调用本地接口对接你的网页功能
• 用Electron把你的网页打包为桌面应用，使用Electron内置的globalShortcut模块注册系统全局热键，无论当前焦点在哪个窗口都能触发对应的tts逻辑
• 编写原生桌面程序（比如C#、Python）注册系统级热键，后台运行监听按键，触发后执行对应操作

内容的提问来源于stack exchange，提问作者Lucas Gualtieri