The only reason I can see for using 'keydown' or 'keyup' would be to track the 'shift', 'ctrl', 'alt', or other special control characters. If you use a foreign language keyboard, 'keypress' will return the correct ascii value, while 'keydown' and 'keyup' return nothing. The 'keypress' event returns a number which is the ascii number of the character. The 'which' values seem to stay consistent between the major browsers, so it may be a good ideato use 'which' over 'keycode' and 'charcode'. Oddly enough the results vary from one browser to the next, especially with 'keycode' and 'charcode', so be careful. This is all great, but what do you actually get out of these events?įrom the DOM, you can retrieve the 'keycode', 'key', 'charcode', 'char', and 'which' values related to the key event. It repeats while the user keeps the key depressed.įires when the user releases a key, after the default action of that key has been performed." It repeats while the user keeps the key depressed.įires when an actual character is being inserted in, for instance, a text input. It's one press, down and up again." But, Quirksmode says this about the key events:įires when the user depresses a key.
If you're a little bit like me, you'll go: "What do you need three for? You press down on the key and you let go.
Otherwise, the key pressed is numeric, and the value is written to the textfield.Ĭongratulations on learning how to use onKeyPress in React! If you have any questions or comments, please feel free to leave them below.JQuery has three event handlers for the keyboard keydown, keypress, and keyup. preventDefault(), meaning that the default behavior (writing a character to the input field) is prevented from occurring (and thus, no character is typed). If this is the case, handleKeyPress() will call the event object created by onKeyPress and.
Then, the function checks by using RegEx (if you’re unfamiliar, this tutorial has a great explanation in its topic about form validation) whether the key pressed is not a number. The onKeyPress attribute of the input field is set to the function handleKeyPress(). This takes the form of a function call:įunction KeyPressElement ( ) It specifies what the component should do when a key is pressed. OnKeyPress in React is passed as an attribute into an. For example, in a web app like Google Docs where you need to autosave constantly, onKeyPress can tell you when a key is typed, and therefore when the document changes and you need to autosave.Īnother use case is in React forms, where you might want to highlight an input text field when the user starts typing input.
There are also use cases that involve key press events in general. OnKeyPress gives you absolute control over what happens when the user presses each different key, allowing you to structure input text fields differently than HTML’s default. For example, you can execute specific functions for certain keys being pressed, such as only allowing numerical input or not allowing a user to press backspace when in a form. Use cases include anything that falls outside of the default handling of HTML input fields. OnKeyPress is an attribute for input text fields, so it is useful in many applications where you want to call a function when a character is typed or when a specific character is typed. It is passed as an attribute in elements, and can be used to perform actions for any event involving the keyboard, whether you want to call a function on any key press, or only when a specific key is pressed. To handle key presses in React, we use onKeyPress.