In this article, we will explain onKeyDown and discuss its practical use cases in React.

We’ll also look at how to use onKeyDown with <input> elements and listen for specific keys like ‘Enter’.

Handle onKeyDown event in React

React internally supports onKeyDown event.

Simply set the element’s onKeyDown prop to a callback function.

Let’s look at an example:

<input onKeyDown={()=> console.log("key was pressed")} type="text" />

When user presses any key, React will log message to the console.

Usually this isn’t enough. You probably want to know which key was pressed. Maybe customize the event handler for different keys.

To get specific key pressed down by the user, you need to pass event argument to event handler and access key property.

Like this:

const handleKeyDown = (event) => {
    if (event.key == "Enter") {
      console.log("Enter was pressed")}
    }
  };

In this example, we check if user pressed down ‘Enter’ key. If they did, then log specified message to the console.

What triggers the onKeyDown event?

By default, onKeyDown event fires is when user presses any key.

The event handler can be modified to run only for specific keys.

In the function body, add an if statement that runs JavaScript code only if event.key is equal to a specific key.

Note: Elements listen for onKeyDown only when focused.

Set onKeyDown on input elements in React

Here’s how to handle onKeyDown events on <input> element.

  • set onKeyDown on an <input> React element.
<input onKeyDown={() => handleKeyDown()} type="text" />
  • Write the event handler

When user presses a key, React will call handleKeyDown() function. Let’s define this function:

const handleKeyDown = (event) => {
    if (event.key == "Enter") {
      setTodos([...todos, event.target.value]);
    }
  };

In the function body, we have an if condition that checksif user pressed down ‘Enter’ key.

If users indeed press ‘Enter’, then their input will be saved in the state.

Open live demo and try it yourself.

Focus <input> when component mounts

In functional components, we can use the useEffect() hook to focus on <input> element as soon as the component mounts.

  1. Create a ref via useRef() hook
  2. Set ref on a React element
  3. Call ref.current.focus() in the useEffect() hook.

Let’s take a look at the example:

export default function Todo() {
  const inputElement = useRef(null);
  useEffect(() => inputElement.current.focus(), []);
  return (
    <div className="App">
      <h1>Things to do today:</h1>
      <input ref={inputElement} type="text" />
    </div>
  );
}

First, we create a variable inputElement to store an empty ref (the result of useRef() hook).

In JSX, we set <input> element’s ref attribute to tie it with inputElement ref.

Finally, we write a useEffect() hook where the first argument – callback function – calls inputElement.current.focus(). The second argument is an empty array, so the callback function sets focus to <input> element only when the component mounts.

Is onKeyDown limited to input elements?

No, you can listen for onKeyDown events on any React element – containers, paragraphs, and so on.

It is commonly used with <input> elements though. Mainly because that’s where most onKeyDown events occur.

onKeyDown – ‘Enter’ key example

You can customize onKeyDown to listen for specific keys.

Let’s look at an example where code in the onKeyDown event handler runs only if users press the ‘Enter’ key:

const handleKeyDown = (event) => {
    if (event.key == "Enter") {
      console.log("Pressed Enter!")
    }
  };

Here we use the if statement to check if the user pressed ‘Enter’ key.

If the condition is met, the event handler logs the message (‘Pressed Enter!’) to the console.

Handling Events