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

Last Updated : 24 Jan, 2023

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:

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

Example:

html

   <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>
 
  

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:

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

Example:

html

   <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>
 
  

Output:

using-repeat

How to Detect Keypress using JavaScript ?

sayantanm19

Improve

Article Tags :

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

html

html

Similar Reads