Javascript event which key

UIEvent: which property

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. 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 UIEvent.which read-only property of the UIEvent interface returns a number that indicates which button was pressed on the mouse, or the numeric keyCode or the character code ( charCode ) of the key pressed on the keyboard.

Value

Value for KeyboardEvent Non-standard

For KeyboardEvent , event.which contains the numeric code for a particular key pressed, depending on whether an alphanumeric or non-alphanumeric key was pressed. Please see deprecated KeyboardEvent.charCode and KeyboardEvent.keyCode for more details.

Note: Consider KeyboardEvent.key or KeyboardEvent.code for new code.

Value for MouseEvent Non-standard

For MouseEvent , event.which is a number representing a given button:

• 0 : No button
• 1 : Left button
• 2 : Middle button (if present)
• 3 : Right button

For a mouse configured for left-handed use, the button actions are reversed. In this case, the values are read from right to left.

Note: Consider MouseEvent.button for new code.

Examples

html lang="en"> head> title>charCode/keyCode/which exampletitle> script> function showKeyPress(evt)  alert( `onkeypress handler:\n` + `keyCode property: $evt.keyCode>\n` + `which property: $evt.which>\n` + `charCode property: $evt.charCode>\n` + `Character Key Pressed: $String.fromCharCode(evt.charCode)>\n`, ); > function keyDown(evt)  alert( `onkeydown handler:\n` + `keyCode property: $evt.keyCode>\n` + `which property: $evt.which>\n`, ); > script> head> body onkeypress="showKeyPress(event);" onkeydown="keyDown(event);"> p>Please press any key.p> body> html> 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

JavaScript Keycode List – Keypress Event Key Codes for Enter, Space, Backspace, and More

TAPAS ADHIKARY

JavaScript keyboard events help you capture user interactions with the keyboard.

Like many other JavaScript events, the KeyboardEvent interface provides all the required properties and methods for handling every keystroke a user makes using the keyboard.

There have been many articles written about how they work and how to use them. At the same time, W3.org keeps updating the specification by introducing new properties, deprecating existing ones, and marking certain code as legacy.

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.

In this article, we will learn about:

• The KeyboardEvent interface.
• The keyboard event types we need to focus on.
• The keyboard event types we may not ever need.
• Which properties you need in practice and how different browsers handle them.
• What is deprecated, and what’s in use.
• A playground to try things out as we learn.
• Finally, the current list of key codes for reference and future use.

The KeyboardEvent interface and the event types

The KeyboardEvent interface provides information using the defined constants, properties, and a single method (as of January 2021). 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.

You can add each of these event types to an HTML element or document object using the addEventListener method. Here is an example of listening to a keydown event on an element whose id is, ‘type-here’:

let elem = document.getElementById('type-here'); elem.addEventListener("keydown", function (event) < // The parameter event is of the type KeyboardEvent addRow(event); >);

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.

Try This Interactive Keyboard Event Playground

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:

Источник

Javascript event e.which?

Two years later, I was having trouble understanding this property after reading several pages elsewhere. Then I stumbled across this old post and got it. So to @Reigel, maybe reconsider before telling someone to Google something. Maybe they already did. That is not SO’s purpose.

@Aerovistae, on that time, searching google would give you something like quirksmode.org/js/events_properties.html . which is very helpful already.

@JuanMendes — Googling «javascript event.which» got me here as the first result. Is that something you feel is «undesireable»? I mean, it sounds like you would rather that the question was never asked/answered here.

4 Answers 4

which is a property of Event objects. It is defined for key-related and mouse-related events in most browsers, but in both cases is not defined in IE (prior to version 9).

document.onmousedown = function(e) < e = e || window.event; var button = (typeof e.which != "undefined") ? e.which : e.button; if (button == 1) < alert("Left mouse button down"); >>; 

For key-related events, which relates to the key that has been pressed. For keydown and keyup events, this is relatively simple: it’s the key code for the key pressed, and returns the same value as the event’s keyCode property. Since all browsers support the keyCode property and IE < 9 does not support which , you should generally use keyCode for keydown and keyup events.

document.onkeypress = function(e) < e = e || window.event; var charCode = (typeof e.which == "number") ? e.which : e.keyCode; if (charCode) < alert("Character typed: " + String.fromCharCode(charCode)); >>; 

Источник

onkeydown in HTML — what key was pressed?

A simple question: when I use the onkeydown event in HTML, how can I find out what key was pressed? I’m sure it’s really easy, but I’ve tried googling it; w3schools was no help, and all the other results were people asking about specific browsers. Is there no way which works in all major browsers? Thanks!

2 Answers 2

The event you’re looking for is the keydown Event, and it provides you with the following properties

• char DOMString (string) The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn’t have a printable representation, this is an empty string. See key names and char values for the detail. Read only. Note: If the key is used as a macro that inserts multiple characters, this attribute’s value is the entire string, not just the first character.
• key DOMString (string) The key value of the key represented by the event. If the value has a printed representation, this attribute’s value is the same as the char attribute. Otherwise, it’s one of the key value strings specified in >. If the key can’t be identified, this is the string «Unidentified». See key names and char values for the detail. Read Only.
• charCodeDeprecated Unsigned long (int) The Unicode reference number of the key; this attribute is used only by the keypress event. For keys whose char attribute contains multiple characters, this is the Unicode value of the first character in that attribute. Read only.
  Warning: This attribute is deprecated; you should use char instead, if available.
• keyCodeDeprecated Unsigned long (int) A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII (>) or Windows 1252 code corresponding to the key; see > for a list of common values. If the key can’t be identified, this value is 0. Read only.
  Warning: This attribute is deprecated; you should use key instead, if available.
• whichDeprecated Unsigned long (int) A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as keyCode. Read only.
  Warning: This attribute is deprecated; you should use key instead, if available.

As implementation is inconsistant, you’ll need to use a logical OR || to get the one supported by the client’s browser.

Источник