キーコードに2つの異なる機能を与えよう

Question

私はスペースバーをHTML 5ゲームのために何かするためにコードを使用しています。素晴らしいですが、ゲームを表示するページにも検索ボックスがあり、訪問者はそのページの検索ボックスでスペースバーを正しく使用することができません。

以下は、ゲームのページのスペースバーに使用しているコードです。

検索ボックスは入力タイプの検索ですので、検索ボックス内でスペースバーが正しく機能するようにするには、関数を検索することができますか？

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

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

おかげ

Answer 1

は、あなたがこれを行うことが多くの方法がありますが、ここでは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>