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

Safari Browser does not currently offer support for MediaRecorder functionality

Most effective method for displaying 100 images on a single page?

Breaking circular dependencies in JavaScript is a common challenge that developers face when

Guidelines for crafting an intricate selector by utilizing mergeStyleSets and referencing a specific class

Tips for presenting HTML source code with appropriate tag coloring, style, and indentation similar to that found in editors

Leveraging JavaScript and Thymeleaf to manipulate a list

What could be causing the issue with my dependency injection in my Angular application?

Ways to retrieve a variable within the init() function

My current array is arr=[1,2,3,4]. I recently added an element to it using arr.push(5). Now I want to rearrange the array to be [5,4,3,2,1]. Any suggestions on how to achieve this

Troubleshooting a Tiny Bottom Sheet Problem in react-native

How to properly adjust HTTP headers within an AngularJS factory

Tips for concealing the ID value within a URL or parameter

Integrating Project Tango with Ionic and/or Angular in a cutting-edge mobile application

The XMLHTTP request and Chrome developer tools do not show matching information

Using Vuex: Delay dispatch of action until websocket response received

Having difficulty extracting image and product names from Amazon or Flipkart pages using Jsoup

JSON object containing elements with dash (-) character in their names

Accessing a model's field within an Ember.js each loop

Tips on including a trash can symbol to rows in a bootstrap table using React

Running concurrently, the JavaScript if and else statements execute together