Open In App

React onKeyDown Event

Last Updated : 22 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

React onKeyDown event occurs on a key press event in a browser. onKeyDown is an updated event in place of onKeyPress.

onKeyPress is now deprecated because it does not work for all keys (like CTRL, SHIFT, and ALT) in all browsers, so onKeyDown is a new event listener that is used to detect the key press event.

It is similar to the HTML DOM onkeydown event but uses the camelCase convention in React.

Syntax:

onKeyDown={keyDownFunction}

Parameter:

  • KeyDownFunction: It is a function that will call once any key is pressed from the Keyboard.

Return type:

  • KeyboardEvent object that provides information about the keyboard key that was pressed.

Examples of onKeyDown Event in React

Below are some of the examples of the onKeyDown event in React. These example demonstrates the working of the onKeyDown event and provides a better learning experience.

Example 1: In this example, we implemented an input field in which we press any key from the keyboard, and on each key, we will check the KeyDown Event listener using JSX. We will print the key in the user interface so that the user can understand which key is pressed.

JavaScript
// App.js
import React, { useState } from "react";
import "./App.css";

function App() {
    const [key, setKey] = useState("");

    const handleKeyDown = (event) => {
        setKey(event.key);
    };

    return (
        <div className="App">
            <h1>GeeksforGeeks</h1>
            {key && <h2>Pressed Key: {key}</h2>}
            <input
                type="text"
                onKeyDown={handleKeyDown}
                placeholder="Press here..."
            />
        </div>
    );
}

export default App;


Output:

created input field using onkeydown event

Example 2: In this example, we implemented onKeyDown functionality in the input field. When the user presses any key, they can see which key was pressed in the console of the browser.

JavaScript
// App.js
import React from "react";
import "./App.css";

function App() {
    const keyDown = (event) => {
        console.log(event.key);
    };

    return (
        <div className="App" onKeyDown={keyDown}>
            <h1>GeeksforGeeks</h1>
            <input
                type="text"
                onKeyDown={keyDown}
                placeholder="Press here..."
            />
        </div>
    );
}

export default App;

Output:

onkeydown event used in input field

Other Keyboard Events

Other keyboard events in React are:

EventOccurs WhenDescription
onkeydownThe user presses a keyUsed to detect initial keypress
onkeypressThe user presses a keyIt is now deprecated and it represented only character input.
onkeyupthe user releases a keyUsed to detect when a key is released


Similar Reads

HTML DOM onkeydown Event
The DOM onkeydown event in HTML occurs when a key is pressed by the user. Order of events related to the onkeydown event: onkeydownonkeypressonkeyup Supported HTML tags: All HTML elements, EXCEPT: &lt;base&gt;&lt;bdo&gt;&lt;br&gt;&lt;head&gt;&lt;html&gt;&lt;iframe&gt;&lt;meta&gt;&lt;param&gt;&lt;script&gt;&lt;style&gt;&lt;title&gt; Syntax: In HTML:
1 min read
HTML onkeydown Event Attribute
The onkeydown event attribute works when the user presses any key from the keyboard. The onkeydown event is triggered when the down key is pressed down and used for capturing and responding to key events. Syntax: &lt;element onkeydown = "script"&gt;Supported Tags: It supports all HTML elements EXCEPT-  &lt;base&gt; &lt;bdo&gt; &lt;br&gt; &lt;head
2 min read
Ways to capture the backspace and delete on the onkeydown event
Given the HTML document. The task is to detect when the backspace and delete keys are pressed on keydown events. Here 2 approaches are discussed, one uses event.key and another uses event.keyCode with the help of JavaScript. These are the following methods: Table of Content Using event.key propertyUsing event.keyCode PropertyApproach 1: Using event
2 min read
JavaScript onKeyPress onKeyUp and onKeyDown Events
Whenever a key is pressed or released, there are certain events that are triggered. Each of these events has a different meaning and can be used for implementing certain functionalities depending on the current state and the key that is being used. These events that are triggered when a key is pressed are in the following order: keydown Event: This
2 min read
What is Event bubbling and Event Capturing in JavaScript ?
Event bubbling and event capturing are the two interesting concepts of JavaScript. Before diving deep into these fascinating concepts, let us first know about what an event listener is? An event listener is basically a function that waits for an event to occur. That event can be anything like a mouse click event, submitting a form, pressing keys of
6 min read
What is the use of the Event.preventDefault() method in Event Handling in JavaScript ?
The Event.preventDefault() method in JavaScript is used within event handlers to prevent the default behavior associated with an event from taking place. When an event occurs, such as a click on a link or the submission of a form, there is often a default action associated with that event. preventDefault() allows developers to stop this default beh
1 min read
Difference between Event Bubling & Event Capturing ?
Event BubblingEvent bubbling is the default behavior in which an event triggered on a nested element propagates up through its ancestors in the DOM hierarchy, allowing each ancestor to respond to the event. Event Capturing Event capturing is the opposite of event bubbling, where the event is captured on the outermost ancestor first, and then it pro
1 min read
Event Countdown Timer Using React
Event Countdown Timer is an application where you can create an event with the name, date, and category of the event and it will create a card that will show you the remaining time of the event. After reaching that time of the day it will notify you. The application will provide the option to start, stop and pause the countdown timer . Project will
5 min read
Changing CSS styling with React onClick() Event
Changing CSS styling with React onClick() Event simply means changing the CSS property or CSS classes when the click event triggers. It can be done by switching the states to update the classes when a button is clicked PrerequisitesReact JSReact useState HookApproachChanging CSS styling with React onClick() Event we will use useState variable. We w
2 min read
Difference between HTML and React Event Handling
Event handling in HTML and React are different from one another in terms of syntax and some rules. The reason behind this is that React works on the concept of virtual DOM, on the other hand, the HTML has access to the Real DOM all the time. We are going to see how we can add the events in HTML and how React differs in event handling. Event Handlin
4 min read