In Javascript, I have callback function for keydown event. I use keyCode and which properties to detect which keys user pressed.
var keyPressed = event.keyCode || event.which;
if (keyPressed > 47 && keyPressed < 58) {
//do something
}
It works well. However, this properties are deprecated, I switch to key property. When I replace code, it does not work correctly.
if (event.key > 47 && event.key < 58) {
//do something
}
I can't check user's pressed key in range.
In Javascript, I have callback function for keydown event. I use keyCode and which properties to detect which keys user pressed.
var keyPressed = event.keyCode || event.which;
if (keyPressed > 47 && keyPressed < 58) {
//do something
}
It works well. However, this properties are deprecated, I switch to key property. When I replace code, it does not work correctly.
if (event.key > 47 && event.key < 58) {
//do something
}
I can't check user's pressed key in range.
Share Improve this question asked Aug 15, 2016 at 12:59 Le ThanhLe Thanh 2274 silver badges10 bronze badges3 Answers
Reset to default 10For printable characters, .key() returns a non-empty Unicode character string containing the printable representation of the key.
Essentially: for ASCII characters, you get the character itself rather than its ASCII code.
So, for digits you could just do:
var myInput = document.getElementsByTagName('input')[0];
myInput.addEventListener("keydown", function(event) {
if(event.key >= "0" && event.key <= "9") {
console.log('digit: ' + event.key);
}
});<input>For letters, you'll also have to check that .key() returns a single character because a non-printable key such as delete will be encoded as "Delete", which would pass the test "Delete" >= "A" && "Delete" <= "Z".
var myInput = document.getElementsByTagName('input')[0];
myInput.addEventListener("keydown", function(event) {
if(event.key.length == 1 && event.key >= "A" && event.key <= "Z") {
console.log('capital letter: ' + event.key);
}
});<input>According to https://developer.mozilla/en-US/docs/Web/API/KeyboardEvent/key
"The KeyboardEvent.key read-only property returns the value of a key or keys pressed by the user."
The values that get returned are strings. You would probably have to remain using key.code if you want to check range.
Alternatively you could use switch statements like in the example on mdn
switch (event.key) {
case "ArrowDown":
// Do something for "down arrow" key press.
break;
case "ArrowUp":
// Do something for "up arrow" key press.
break;
case "ArrowLeft":
// Do something for "left arrow" key press.
break;
case "ArrowRight":
// Do something for "right arrow" key press.
break;
case "Enter":
// Do something for "enter" or "return" key press.
break;
case "Escape":
// Do something for "esc" key press.
break;
default:
return; // Quit when this doesn't handle the key event.
}
Or event still make an array like
var validKeys = ["ArrowDown", "ArrowUp", ...]
and then check to see if the event.key is in the array.
Finally you could use regular expressions
This should work
<script type="text/javascript">
document.addEventListener('keydown', function(event){
var charTyped = event.key;
if (/^[a-z\d]$/i.test(charTyped)) {
console.log("Letter or number typed: " + charTyped);
}
})
</script>
The regex code for letters only, capital letters included, is like this
/^[a-z\D]- \d - used when you want to include numbers
- \D - exclude numbers
So, the entire code block would look like this:
window.addEventListener('keydown', e => {
const letterTyped = e.key;
if (/^[a-z\D]$/i.test(letterTyped)) {
console.log("Letter pressed: " + letterTyped);
}
});