I need that each time a key is pressed, a function is executed, which will vary depending on the key that was pressed. So I need to know which key was pressed.
This is what I have so far:
function onKeyDownHandler() {
console.log("key pressed ", String.fromCharCode(event.keyCode));
}
<input onkeydown="onKeyDownHandler();"/>
But I still can't get the value of the pressed key.
You could do something like the following:
The first thing we do is include the variable
event
in the eventOnKeyDown
. This serves so that at the time the event is executed, it can have access to the information regarding the key.The second is to use this instruction:
This allows us to obtain the code of the pressed key. We use
which
because the parameterkeyCode
may not work in all browsers.If you want to know about the other keys (Escape, Enter, Shift, Etc), you can look at this page , examples of the key codes are included here.
About the use of the instruction
which
andkeyCode
you can look at this link , where the reason is indicated.event.key
it is easierMozilla Documentation
If you are using pure javascript (without jquery) you have to do some validation before.
Your input has to take the event parameter since in FireFox the event is not global and is passed as a parameter
In your function you have to first validate where the event comes from, if it comes in the parameters (FireFox) or if it is in the global scope (IE). Then you have to get the value of the pressed key with keyCode (IE and FF) or wich (I think Netscape and Opera).
Note that the value of key will be the ASCII code of the key pressed.
Short answer
Instead of using the global property, declare it
event
as an argument to your function.Instead of
keyCode
useskey
for the character keys,shiftKey
,ctrlKey
,altKey
andmetaKey
for the shift, control, alt, and Windows / Commmand (Mac) keys respectively.Explanation
In Firefox for Windows the code in the question does not work, it returns
This happens because in Internet Explorer and Chrome
event
it is a global property but not in Firefox.On the other hand, according to https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent both properties are deprecated
keyCode
andwhich
the use ofkey
. TheshiftKey
,ctrlKey
,altKey
and propertiesmetaKey
will returntrue
whether the corresponding key has been pressed.Aside from being deprecated, not all browsers support such properties.
An additional alternative is the use of a library such as jQuery which aims to take care of handling the variants of the different browsers.
Example using "pure" JavaScript
The following example adds the keystroke log to the element
<input>
and prints the result to an element<div>
.Putting "pure" is because the KeyboardEvent object is not an object of the JavaScript language specification but is part of the Web APIs.
Example using jQuery
One of the purposes of jQuery is to support multiple browsers in a standardized way. Below is an example in which the recommendations mentioned in the short answer section are applied, the declaration of the variable to which the event object will be assigned and the use of the property
key
.