Geben Sie Keycode 2 verschiedene Funktionen

Question

Ich verwende Code, um die Leertaste etwas für ein HTML 5-Spiel zu tun. Es funktioniert gut, aber die Seite, auf der das Spiel angezeigt wird, hat auch ein Suchfeld, und Besucher können die Leertaste nicht ordnungsgemäß im Suchfeld auf dieser Seite verwenden.

Unten ist der Code, den ich für die Leertaste auf der Spielseite verwende.

Das Suchfeld ist Eingabe-Typ-Suche, also habe ich mich gefragt, ob eine Funktion erstellt werden könnte für: Suche, um die Leertaste wieder korrekt in das Suchfeld zu arbeiten.

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

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

dank

Answer 1

Es gibt viele Möglichkeiten, wie Sie dies tun könnte, ist hier ein:

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

Innerhalb der obigen Funktion, die Sie wenn der Cursor in Ihrem Suchfeld ist überprüfen müssen, und wenn es ist dann überspringen Sie den Rest der Funktion

Haben Sie Ihren Code wie folgt umgeschrieben, hoffe es hilft

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(); 
    } 
} 
}; 

Prost Mate!

Answer 3

Sie können die ‚keydown‘ Ereignisse aus der Suchleiste stoppen nach oben ausbreitet durch event.stopPropagation() Aufruf:

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>