Javascript detecting key press event only firing once when a key is continuously held down

Question

Javascript detecting key press event only firing once when a key is continuously held down

I have implemented the code below to redirect to a specific page when the w, s, a, d keys are pressed.

<script>
document.addEventListener('keydown', function(e){
e = e || window.event;
key = e.keyCode || e.charCode;
var keys = { 
  87: '{$up}', 
  68: '{$right}', 
  83: '{$down}', 
  65: '{$left}'
};
if (keys[key]) window.location.href = keys[key];
});
</script>

The PHP variables store the URL addresses.

My query is whether it is feasible to make the keypress register only once per click. Currently, if you hold the key down, it triggers repeatedly.

Appreciate any suggestions or advice.

javascript

Answer 1

Answer №1

Experiment with the 'keypress' event:

<script>
document.addEventListener('keypress', function(event){
event = event || window.event;
keyPress = event.keyCode || event.charCode;
var keyCodes = { 
  72: '{$up}', 
  74: '{$right}', 
  75: '{$down}', 
  76: '{$left}'
};
if (keyCodes[keyPress]) window.location.href = keyCodes[keyPress];
});
</script>

Answer 2

Experiment with the 'keypress' event:

<script>
document.addEventListener('keypress', function(event){
event = event || window.event;
keyPress = event.keyCode || event.charCode;
var keyCodes = { 
  72: '{$up}', 
  74: '{$right}', 
  75: '{$down}', 
  76: '{$left}'
};
if (keyCodes[keyPress]) window.location.href = keyCodes[keyPress];
});
</script>

Answer 3

Answer №2

To keep track of the pressed keys, you can maintain a list and only execute your code on keydown if the key is not already in the list. When a key is released on keyup, simply remove it from the list.

var keysPressed = {};
document.addEventListener('keydown', function(e){
  e = e || window.event;
  var keyPressed = e.keyCode || e.charCode;
  if(keysPressed[keyPressed]) return;
  keysPressed[keyPressed] = true;
  // Perform desired action
});
document.addEventListener('keyup', function(e){
  e = e || window.event;
  var keyReleased = e.keyCode || e.charCode;
  delete keysPressed[keyReleased];
});

var keysPressed = {};
document.addEventListener('keydown', function(e){
  e = e || window.event;
  var key = e.keyCode || e.charCode;
  if(keysPressed[key]) return;
  keysPressed[key] = true;
  var directionKeys = { 
    87: '{$up}', 
    68: '{$right}', 
    83: '{$down}', 
    65: '{$left}'
  };
  console.log(directionKeys[key]);
});
document.addEventListener('keyup', function(e){
  e = e || window.event;
  var key = e.keyCode || e.charCode;
  delete keysPressed[key];
});

Answer 4

To keep track of the pressed keys, you can maintain a list and only execute your code on keydown if the key is not already in the list. When a key is released on keyup, simply remove it from the list.

var keysPressed = {};
document.addEventListener('keydown', function(e){
  e = e || window.event;
  var keyPressed = e.keyCode || e.charCode;
  if(keysPressed[keyPressed]) return;
  keysPressed[keyPressed] = true;
  // Perform desired action
});
document.addEventListener('keyup', function(e){
  e = e || window.event;
  var keyReleased = e.keyCode || e.charCode;
  delete keysPressed[keyReleased];
});

var keysPressed = {};
document.addEventListener('keydown', function(e){
  e = e || window.event;
  var key = e.keyCode || e.charCode;
  if(keysPressed[key]) return;
  keysPressed[key] = true;
  var directionKeys = { 
    87: '{$up}', 
    68: '{$right}', 
    83: '{$down}', 
    65: '{$left}'
  };
  console.log(directionKeys[key]);
});
document.addEventListener('keyup', function(e){
  e = e || window.event;
  var key = e.keyCode || e.charCode;
  delete keysPressed[key];
});

Javascript detecting key press event only firing once when a key is continuously held down

Answer №1

Answer №2

Similar questions

REGEX: All characters that appear between two specified words

Material UI AppBar displaying custom colors instead of theme colors

Activate or deactivate a text box within a table based on the checkbox's status

Choose an option with JavaScript once the request is successful

The process of implementing sticky headers that stay in place while scrolling in a React application

When I try to run Parcel, my ReactJS website just won't deploy in a serverless environment

What is the reason that the for loop updates all indexes in Node.js?

Sophisticated web applications with Ajax functionalities and intricate layouts powered by MVC frameworks

Fixing My Code with JQuery Tabs and Hyperlinking

Converting Markdown to HTML using AngularJS

Utilizing Office.js: Incorporating Angular CLI to Call a Function in a Generated Function-File

Vue template is not being rendered when served through Django

What is the best way to generate a "JSON diff" that can be displayed in the JavaScript console?

My API is feeding data to the Material UI CardMedia image

Dealing with an unspecified parameter can be tricky - here's how you

Refresh TR when clicked

After the request.send() function is called, the request is not properly submitted and the page automatically redirects

Tips for updating VUE's main.js file to incorporate the routers/index.js configuration

Guide on how to use JavaScript to make an HTML5 input field mandatory

partial download between servers