Question

我正在使用代码使空格键为HTML 5游戏做点什么。它工作得很好，但显示游戏的页面也有一个搜索框，访问者将无法在该页面的搜索框中正确使用空格键。

以下是我在游戏页面上用于空格键的代码。

搜索框是输入类型搜索，所以我想知道一个函数是否可以用于：搜索，还原空格键以在搜索框内正常工作。

var hit = document.getElementById("hit");

document.onkeydown = function(e) 
{
    if (e.keyCode == 32) 
    {
        e.preventDefault();
        hit.click();
    }
};

感谢

Answer 1

有很多方法可以做到这一点，这里有一个：

var hit = document.getElementById("hit");

document.onkeydown = function(e) {
  if (e.keyCode == 32) {
    if (e.currentTarget.type === 'input') { //Or whatever check you want here
      // Do things for your searchBox
      return; //Prevent rest of the function from running
    }
    e.preventDefault();
    hit.click();
  }
};

Answer 2

在上述功能中，您必须检查光标是否在搜索框中，如果是，则跳过功能的其余部分

重写了以下代码，希望有所帮助

var hit = document.getElementById("hit");
document.onkeydown = function(e) 
{

if (document.activeElement.nodeName != 'TEXTAREA' && document.activeElement.nodeName != 'INPUT') {

    if (e.keyCode == 32) 
    {
        e.preventDefault();
        hit.click();
    }
}
};

干杯队友！

Answer 3

您可以通过调用event.stopPropagation()来阻止搜索栏中的“keydown”事件向上传播：

document.addEventListener('keydown', function(e) {
  console.log('hit!'); 
  e.preventDefault();
});

let search = document.getElementById("search");

search.addEventListener('keydown', function(e) {
  console.log("search!");
  e.stopPropagation();
});

<form id="search"><input name="query" type="text"><input type="submit" value="search"></form>

给keycode 2个不同的功能

3 个答案: