How to make a key fire when key is pressed using JavaScript ?

In JavaScript, holding down a key will fire the key continuously until it is released. This behavior may be used in applications such as games where a key may be expected to fire only once even after being held down. This can be achieved using two methods:

Method 1: Using a flag variable to check the current key status: A flag variable is defined which keeps track of the current key press. The ‘keyup’ and ‘keydown’ events are both set to modify this flag variable so that it correctly reflects the current status of the key press.

The ‘keydown’ event only allows for the respective event to fire if the key is not already held down by checking the flag variable. The ‘keyup’ event on the other hand sets the flag variable to indicate that the key has been released. Using both these with event listeners, one can make sure that the key fires only once even if it is being held down.

Syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

let isPressed = false;
      
element.onkeydown = function (e) {
    if (!isPressed) {
        isPressed = true;
        console.log('Key Fired!');
    }
};
  
element.onkeyup = function (e) {
    isPressed = false;
}

chevron_right


Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to make a key fire when key
        pressed using JavaScript ?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to make a key fire only
        once when pressed?
    </b>
      
    <p>
        Press any button and observe
        the logs to verify that a key
        only fires once.
    </p>
      
    <input type="text">
      
    <script type="text/javascript">
        let element = document.querySelector('input');
        let isPressed = false;
          
        element.onkeydown = function (e) {
            if (!isPressed) {
                isPressed = true;
                console.log('Key Fired!');
            }
        };
      
        element.onkeyup = function (e) {
            isPressed = false;
        }
    </script>
</body>
  
</html>

chevron_right


Output:
using-flags

Method 2: Using the repeat property: The ‘repeat’ property of the KeyboardEvent interface is used to check if a key is getting repeated as a result of being held down by the user. This property can be checked on every ‘keydown’ event and allow the specified event to only fire if it returns false. This prevents the key from firing multiple times even if the user holds the key down.

Syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

element.onkeydown = function (e) {
    if (!e.repeat) {
        console.log("Key Fired!");
    }
};

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to make a key fire when key
        pressed using JavaScript ?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to make a key fire only
        once when pressed?
    </b>
      
    <p>
        Press any button and observe
        the logs to verify that a key
        only fires once.
    </p>
      
    <input type="text">
      
    <script type="text/javascript">
          
        let element = 
            document.querySelector('input');
      
        element.onkeydown = function (e) {
            if (!e.repeat) {
                console.log("Key Fired!");
            }
        };
    </script>
</body>
  
</html>

chevron_right


Output:
using-repeat

full-stack-img




My Personal Notes arrow_drop_up

Im listening

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.