Keypress which key

Because of this, it is essential for web developers to keep learning about the KeyboardEvent interface to know what exactly they should use and what's no longer relevant. The KeyboardEvent interface provides information using the defined constants, properties, and a single method as of January It extends the UIEvent interface which eventually extends the Event interface.

There are primarily three keyboard event types, keydown , keypress and, keyup. We can get contextual information about these events from the KeyboardEvent interface's properties and methods. Here is an example of listening to a keydown event on an element whose id is, 'type-here':. Alternatively, you can use the handler methods like, onKeydown event , onKeyup event , onKeypress event with the element to handle keyboard events.

Here is an example of handling a keyup event on an input element:. If you print the event object in the browser's console, you will see all its properties and methods along with the ones it inherits from the UIEvent and Event interfaces.

Before we go any further, how about a playground to explore all the keyboard events, their properties, characteristics, and so on? I think it will be awesome to use it alongside this article and beyond. Just focus your cursor anywhere in the app embedded below, and type any key to see the contextual information about it.

You can also filter out the events you want by unchecking the checkboxes at the top. So give it a try:. Among these events, the most used Keyboard event is or, should be keydown because:. In the example below, we are using event. The bowser's action to write the key characters into the textbox will not be performed in the case of keydown but it will continue to happen for keyup.

With all that explanation, the keydown event is a clear winner and should become the most popular used key event type. This is the billion dollar question! The shortest answer is, it depends. But on what? It depends on:. But before we get there, let's see a preview of some of the the useful properties and methods of the KeyboardEvent interface.

The last three properties are deprecated and you should use the key property instead. The key property has the widest browser support. So as long as you are not using any of the older browsers, the event. In case you have to support an older browser, a better fallback would be the event.

If your code uses any of the deprecated properties and you have an opportunity to refactor that code, it is always better to go for it. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time. The keypress event is fired when a key that produces a character value is pressed down. Secure Hash Algorithms.

Best Way to Learn Java. How to Start New Blog. Skip to content. Read More: Difference between keypress and keydown events 2. To determine which key was pressed, we can examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the.

The key events are mapped, so instead of using the keycode value you can also use the key value to make it a little more readable. Here is a cheat sheet with the mapped keys which I got from this blog. Checkout the excellent jquery. I'll just supplement solution code with this line e. In case of input field of form we don't attend to submit on enter pressed.

No number codes anymore. You can check key directly. For example "Enter" , "LeftArrow" , "r" , or "R". Mozilla Docs. Supported Browsers. Here is an example removed unnecessary attributes from code. Some browsers use keyCode, others use which. If you're using jQuery, you can reliably use which as jQuery standardizes things. I have just made a plugin for jQuery that allows easier keypress events. Instead of having to find the number and put it in, all you have to do is this:.

It's that simple. That would fire when 1 is pressed. Because the long version is so The event. Stack Overflow for Teams — Collaborate and share knowledge with a private group.

Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. Ask Question. Asked 12 years, 11 months ago. Active 4 months ago. Viewed k times. With jQuery, how do I find out which key was pressed when I bind to the keypress event?