$(document).on('keydown', function(e) {
if (e.repeat) { return }
if (e.key == 'q' || e.key == 'Q') {
$('.box.green').addClass('active').click();
} else if (e.key == 'w' || e.key == 'W') {
$('.box.red').addClass('active').click();
} else if (e.key == 'a' || e.key == 'A') {
$('.box.yellow').addClass('active').click();
} else if (e.key == 's' || e.key == 'S') {
$('.box.blue').addClass('active').click();
} else { return }
$(document).on('keyup', function() {
$('.box').removeClass('active');
});
});
this code stores when any of the 'q', 'w', 'a', 's' key is clicked in an array.
this works fine until I click and hold any key which results in repeated input.
for dealing with this I used if (e.repeat) { return } but this is not working and does not give any error in the console.
Help Me to find what I am doing wrong.
here is the remaining relevant code if it helps
var boxName = ['Q', 'W', 'A', 'S'];
$('.box').click(function() {
userPattern.push(boxName.indexOf(this.textContent));
console.log(boxName.indexOf(this.textContent));
});
It looks like the repeat property isn't defined at all in the jQuery event (e) object.
$(document).on("keydown keypress", function (e) {
console.log(e.repeat);
});body{
height: 100vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Press and old any key...But using addEventListener, it works with keydown. You will notice that the very first log is false and all the other ones are true.
document.addEventListener("keydown", function(e){
console.log(e.repeat); // If pressed more then once (in less then 1000ms) "true"
});body{
height: 100vh;
}Press and hold any key...Here is a code suggestion for you:
document.addEventListener('keydown', function(e) {
if (e.repeat) {
return;
}
console.log(`The "${e.key}" is down.`);
if (e.key == 'q' || e.key == 'Q') {
$('.box.green').addClass('active').click();
} else if (e.key == 'w' || e.key == 'W') {
$('.box.red').addClass('active').click();
} else if (e.key == 'a' || e.key == 'A') {
$('.box.yellow').addClass('active').click();
} else if (e.key == 's' || e.key == 'S') {
$('.box.blue').addClass('active').click();
} else {
return;
}
});
// It is a good practice NOT to have event handlers defined in another one.
$(document).on('keyup', function() {
// clear the console
console.clear()
$('.box').removeClass('active');
});body {
height: 100vh;
}
.active {
border: 3px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Press and hold any of the "q", "w", "a", "s" keys
<div class="box green">GREEN</div>
<div class="box red">RED</div>
<div class="box yellow">YELLOW</div>
<div class="box blue">BLUE</div>And about the keyup handler: you may want to remove the active class only on the relevant element instead of all the .box elements...
Additionally: It is a good practice NOT to have event handlers defined in another one to avoid registering multiple times the same handler.