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

27 Jan, 2020
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:
<!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>
Output:
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("Key Fired!");    }};
Example:
<!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>
Output:
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?