Question

我有一个Web应用程序，该应用程序永远运行60FPS循环，有时我想检查一下钥匙是否按下。所以我做了

var keydown = []
window.addEventListener("keydown", function(e){keydown[e.keyCode]=true})
window.addEventListener("keyup", function(e){keydown[e.keyCode]=false})
function loop() {
    if(keydown[17]) console.log("Control is down.")
    if(keydown[71]) console.log("F is down.")
}
setInterval(loop, 16)

问题在于，如果用户按下Ctrl + F来搜索页面，那么当他们放开时，查找窗口将具有焦点，因此不会触发键控。因此我的应用程序认为控制和F永远失效。因此，我为控制键添加了此技巧：

// Hack to fix control key being down forever.
window.addEventListener("mousemove", function(e){
    if(keydown[17] && !e.ctrlKey) {
        keydown[17] = false
    }
})

如果F键永远按下，该怎么办？我曾尝试重置能见度更改上的所有键，但当用户搜索时不会触发。

这里是演示和来源：http://touchbasicapp.com/testkeyup.html

此错误位于Windows和Mac，Chrome和Safari上。

Answer 1

当窗口失去焦点（模糊事件）时清除数组可能是您的最佳选择。

window.addEventListener("blur", function(e) {
    keydown = [];
});

不幸的是，我认为无法保证在打开搜索界面时浏览器必然会触发模糊事件，但他们可能应该这样做。

Answer 2

您需要停止按键事件以防止组合：

var keydown = []
window.addEventListener("keydown", function (e) {
	e.preventDefault();
	keydown[e.keyCode] = true;
});
window.addEventListener("keyup", function (e) {
	e.preventDefault();
	keydown[e.keyCode] = false;
});

function loop() {
	var comb = "";
	if (keydown[17]) comb += "CTRL";
	if (keydown[70]) {
		if (keydown[17]) comb += "+";
		comb += "F";
	}
	if ((keydown[17]) || (keydown[70])) console.log("I press " + comb);
}
setInterval(loop, 50);

JavaScript跟踪准确按下了哪些键

2 个答案: