CODEWITHSUNDEEP
javascriptjquery
Programmer7
Programmer7

Reputation: 159

Give keycode 2 different functions

I am using code to make the spacebar do something for an HTML 5 game. It works great, but the page that displays the game also has a Search Box, and visitors will not be able to use the spacebar properly in the Search Box on that page.

Below is the the code I am using for the spacebar on the game's page.

The Search Box is input type search, so I was wondering if a function could be make for :search, to revert the spacebar to work correctly inside the Search Box.

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

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

thanks

Upvotes: 0

Views: 43

Answers (3)

le_m
le_m

Reputation: 20228

You can stop the 'keydown' events from the search bar from propagating upwards by calling event.stopPropagation():

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>

Upvotes: 0

Anirudh shetty
Anirudh shetty

Reputation: 1

Inside the above function you must check if the cursor is in your search box, and if it is then skip the rest of the function

Have rewritten your code as below, hope it helps

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

Cheers mate!

Upvotes: 0

BravoZulu
BravoZulu

Reputation: 1140

There are many ways you could do this, here's one:

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

Upvotes: 1

Related Questions