How To Handle The OnKeyPress Event In React

Users can set onKeyPress active with any key or set onKeyPress active with a specific key to handle the onKeyPress event in React. We’ll give you step-by-step instructions to make it happen in this article.

What is the onkeypress event in JavaScript?

The onkeypress event in JavaScript occurs after the user press a key that is not a modifier key on the keyboard. This event occurs as soon as a key is pressed and is not related to whether the key is held down or released later. And this event fires on Element Objects in JavaScript.

The modifier keys here are keys like Shift or Ctrl. The onkeypress event does not support getting events generated on these modifier keys. To get events generated when pressing them, use the event with almost the same effect as keyup and keydown events for replacement. Here is an example:

<input id="name_input" onkeypress="onKeyPress()" />
<script>
function onKeyPress() {
    console.log('This is the name input');
}
</script>

Output:

This is the name input

After you press any key on your keyboard, the function return “This is name input” because we can catch the onkeypress event of the input now.

The difference between onkeypress and onkeyup/onkeydown

When a key is disabled (As in keyboard shortcuts; for instance, in Ctrl+A, Ctrl is held “down”), onkeydown is triggered.

When the key is released, onkeyup is triggered (Including modifier keys).

Depending on the keyboard repeat, onkeypress is activated as a combination of onkeydown and onkeyup.

Handle the onKeyPress event in React 

Set onKeyPress active with any key

You can set the keyPress function active with any key on your keyboard. Look at the example below. 

Code:

export default function App() {
    function keyPress() {
      	console.log("You pressed the key");
    }
  
    return <textarea onKeyPress={keyPress} defaultValue="Your name"></textarea>;
}

Output:

You pressed the key

So with this example, if you press any key, the result is the same because we didn’t set the key for the function. We also can’t get which key we have pressed.

Set onKeyPress active with a specific key

In real projects, you have to set a onkeypress event for each specific case when the user type key. For each specific case, we have different ways of handling it. Here is a specific example of a user typing specific keys.

Code:

export default function App() {
    function handleKeyPress(e) {
        if (e.key === "Enter") {
            console.log("You pressed " + e.key);
            console.log("You entered your name");
        }
    }

    return (
      	<textarea 
          onKeyPress={(e) => handleKeyPress(e)} 
          defaultValue="Your name"
        ></textarea>
    );
}

Output:

You pressed Enter
You entered your name

In the above example, to catch the press Enter key event, we’ll press Enter and console.log run the value of the key and “You entered your name”. If we press other buttons, nothing is returned.

Summary

This article shows us how to handle the onKeyPress event in React. We hope these above methods are effective for you. If you have any questions or problems, please comment below. We will respond as possible. Thank you for reading!

Maybe you are interested:

• Toggle a class on click in React
• Call multiple functions onClick in React
• Set the default checked value of a Checkbox in React
• How To Clear An Input Field’s Value In React.js

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs