Use event.key instead of event.keyCode

Question

So lets say that I have code that checks if an keypress was a number

if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode >= 96 && e.keyCode <= 105 ) {
// number entered, do something
} else if (e.keyCode === 8) {
// backspace pressed
}

How would I go about changing these checks to use event.key as event.keyCode is depreciated. Is it as easy as I think it is?

In particular how to I use e.key with the backspace key

Do you really want to check the keyCode or the character that was generated? The keyCode just tells you the key that was pressed, it doesn't tell you the character it generated, e.g. if one or more modifier keys are also pressed, pressing the "G" key might return "g", "G", "©", "˝", and so on. — RobG
– RobG, Commented Nov 21, 2018 at 0:29

Patrick Evans · Accepted Answer · 2018-11-21 00:35:03Z

1

You just change it to use the name of the key being pressed. For letters it is the letter pressed, a = "a", A = "A", z = "z" etc. Number is the the string version of the number 1 = "1", 2 = "2" etc. For control keys it is the name of the key, ctrl = "Control", backspace = "Backspace", etc.

A list can be seen here

So if you are needing to test for number range you can get the key value and coerce it to a number and just do the applicable comparison, as for backspace just compare against the string "Backspace"

//coerce it to a number
numKey = +e.key;
if (!isNaN(numKey) && numKey >= 0 && numKey <= 9 ) {
// number entered, do something
} else if (e.key == "Backspace") {
// backspace pressed
}

answered Nov 21, 2018 at 0:35

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use event.key instead of event.keyCode

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related