CODEWITHSUNDEEP
javascripthtmlcss
pierreh
pierreh

Reputation: 169

How to check if a key (on the keyboard) is being held down?

Basically title. I need a function which works kind of like a crouch button - the character crouches only when the down arrow key is being HELD, not only pressed once. How do I make it work? Here is what I have tried but it doesn't work. Thanks in advance!!!!!

document.onkeydown = function (event) {
    let key = event.key;
    while (key ==  "ArrowDown") {
        character.style.width = 50 + "px";
        character.style.height = 30 + "px";
        character.style.top = 115 + "px";
    }
}

Upvotes: 4

Views: 2610

Answers (2)

Andrew James Custer
Andrew James Custer

Reputation: 21

I think what you might be looking for is to simply put this at the beginning of the code block within the event listener:

if (!e.repeat) return

Upvotes: 2

Yousaf
Yousaf

Reputation: 29282

keydown event is continuously fired when you hold down any key and when you release the key, keyup event is fired.

To achieve what you are trying to do, add the styles to the character when keydown event is fired and on keyup event remove those styles from the character.

Following code snippet shows an example:

const character = document.querySelector('.character');

document.body.addEventListener('keydown', (event) => {
  character.classList.add('crouch');
});

document.body.addEventListener('keyup', (event) => {
  character.classList.remove('crouch');
});
div {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
}

.crouch {
  height: 50px;
  top: 50px;
}
<div class="character">Press any key</div>

Upvotes: 7

Related Questions