What is the method for determining if a key on the keyboard is currently being pressed?

Question

What is the method for determining if a key on the keyboard is currently being pressed?

I am in need of a function that mimics a crouch button for my character. The character should only crouch while the down arrow key is being held, not just pressed once. How can I achieve this functionality? Below is my attempted code, which unfortunately does not work as intended. Any help would be greatly appreciated!

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";
    }
}

javascript html css

Answer 1

Answer №1

When you press down a key, the browser continuously registers the <code>keydown

event. Once you release the key, the keyup event is triggered.

To implement your desired functionality, apply specific styles to the character when the keydown event occurs, and remove those styles when the keyup event happens.

Here's an example code snippet demonstrating this:

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>

Answer 2

When you press down a key, the browser continuously registers the <code>keydown

event. Once you release the key, the keyup event is triggered.

To implement your desired functionality, apply specific styles to the character when the keydown event occurs, and remove those styles when the keyup event happens.

Here's an example code snippet demonstrating this:

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>

Answer 3

Answer №2

To address your query, it might be beneficial to consider inserting the following line at the start of the code block in the event listener:

if (!e.repeat) return

Answer 4

To address your query, it might be beneficial to consider inserting the following line at the start of the code block in the event listener:

if (!e.repeat) return

What is the method for determining if a key on the keyboard is currently being pressed?

Answer №1

Answer №2

Similar questions

How to assign a value to an array within a form in Angular 8

Tips for pinpointing a particular input text field in Selenium with a CSS selector that is related to the label text

Storing segments of URL data for future use in React applications

What is the process for setting up a subrouter using React Router v6?

As the user types, automatically format the input field for a seamless and intuitive experience

Unable to establish connection to MongoHQ using Node.js connection URL

Why won't my Twitter Bootstrap navigation bar apply the styles?

Is it possible to generate unique identifiers for v-for keys using vue-uuid?

Pause the initial ajax data loading in Tabulator.js and instead load data only after the first filter is applied

Discover the status of appcache on a webpage even without a manifest file by utilizing an iframe

What could be causing my res.statusCode to switch from 200 to 404 after using collection.replaceOne?

What is the process for turning off caching in CORS-Anywhere?

Create a JSON array of objects and dynamically append new items to it

Creating an embedded link to a website that adjusts to different screen sizes while also dynamically changing

Whenever I launch my React web application, I consistently encounter a white screen when attempting to access it on my phone

Increase the size of the text box as more text is entered (similar to how it works

When there is no content in the responseText, AJAX will display an error

Preventing parent properties from overriding descendants is a key part of maintaining a hierarchical

When an accordion is clicked, the content is dynamically loaded within the accordion on the page using PHP, jQuery, and AJAX

Button located beneath or above each individual image within the *ngFor loop