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.
For 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.org/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>
Related
Using <input type=number> will cause this.value inside of an event listener to return an empty string if the input is not a valid number. You can see an example of this at http://jsfiddle.net/fSy53/
However, the invalid characters are still displayed in the input.
Is there any way to get the value that is actually displayed, including the invalid characters, from within an event listener?
My ultimate goal is to prevent users from actually typing any non-numeric characters into the field. I need to use type=number so that the numeric virtual keyboard is used by mobile devices. My goal would be to do something like this.value = this.value.replace(/[^0-9.]/g, "") on keyup keypress, but this doesn't work because if an invalid character is typed, reading from this.value returns "".
Try preventing the default behaviour if you don't like the incoming key value:
document.querySelector("input").addEventListener("keypress", function (evt) {
if (evt.which < 48 || evt.which > 57)
{
evt.preventDefault();
}
});
You can accomplish this by preventing the keyPress event from occurring for non-numeric values
e.g (using jQuery)
$('.input-selector').on('keypress', function(e){
return e.metaKey || // cmd/ctrl
e.which <= 0 || // arrow keys
e.which == 8 || // delete key
/[0-9]/.test(String.fromCharCode(e.which)); // numbers
})
This accounts for all different types of input (e.g. input from the number pad has different codes than the keyboard) as well as backspace, arrow keys, control/cmd + r to reload etc
Please note that e.which, e.keyCode and e.charCode are deprecated: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which
I prefer e.key:
document.querySelector("input").addEventListener("keypress", function (e) {
var allowedChars = '0123456789.';
function contains(stringValue, charValue) {
return stringValue.indexOf(charValue) > -1;
}
var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
|| e.key === '.' && contains(e.target.value, '.');
invalidKey && e.preventDefault();});
This function doesn't interfere with control codes in Firefox (Backspace, Tab, etc) by checking the string length: e.key.length === 1.
It also prevents duplicate dots at the beginning and between the digits: e.key === '.' && contains(e.target.value, '.')
Unfortunately, it doesn't prevent multiple dots at the end: 234....
It seems there is no way to cope with it.
The other answers seemed more complicated than necessary so I adapted their answers to this short and sweet function.
function allowOnlyNumbers(event) {
if (event.key.length === 1 && /\D/.test(event.key)) {
event.preventDefault();
}
}
It won't do change the behavior of any arrow, enter, shift, ctrl or tab keys because the length of the key property for those events is longer than a single character. It also uses a simple regular expressions to look for any non digit character.
inputs[5].addEventListener('keydown', enterNumbers);
function enterNumbers(event) {
if ((event.code == 'ArrowLeft') || (event.code == 'ArrowRight') ||
(event.code == 'ArrowUp') || (event.code == 'ArrowDown') ||
(event.code == 'Delete') || (event.code == 'Backspace')) {
return;
} else if (event.key.search(/\d/) == -1) {
event.preventDefault();
}
}
in this case, the value of the input field stays intact when a non-number button is pressed, and still delete, backspace, arrowup-down-left-right work properly and can be used for modifying the digital input.
This solution seems to be working well for me. It builds on #pavok's solution by preserving ctrl key commands.
document.querySelector("input").addEventListener("keypress", function (e) {
if (
e.key.length === 1 && e.key !== '.' && isNaN(e.key) && !e.ctrlKey ||
e.key === '.' && e.target.value.toString().indexOf('.') > -1
) {
e.preventDefault();
}
});
I will add MetaKey as well, as I am using MacOS
input.addEventListener("keypress", (e) => {
const key = e.key;
if (!(e.metaKey || e.ctrlKey) && key.length === 1 && !/\d\./.test(key)) {
e.preventDefault();
}
}
Or, you can try !isNaN(parseFloat(key))
try this one :
current key pressed -> e
if e is not a number -> isNaN(e.key)
when condition is true , so default action should not be taken as it normally would be -> e.preventDefault()
else, return default action... e
input.addEventListener("keypress", function (e) {
if (isNaN(e.key)) e.preventDefault();
});
Update on the accepted answer:
Because of many properties becoming deprecated
(property) KeyboardEvent.which: number #deprecated
you should just rely on the key property and create the rest of the logic by yourself:
The code allows Enter, Backspace and all numbers [0-9], every other character is disallowed.
document.querySelector("input").addEventListener("keypress", ({ key, preventDefault }) => {
if (isNaN(parseInt(key, 10)) && !['Backspace', 'Enter'].includes(key)) {
preventDefault();
}
});
NOTE
This will disable paste action
Based on Nrzonline's answer: I fixed the problem of the multiple "." at the end of the input by adding a
let lastCharacterEntered
outside of the input and then onKeyPress
e => {
var allowedChars = "0123456789.";
function contains(stringValue, charValue) {
return stringValue.indexOf(charValue) > -1;
}
var invalidKey =
(e.key.length === 1 && !contains(allowedChars, e.key)) ||
(e.key === "." && contains(e.target.value, "."));
console.log(e.target.value);
invalidKey && e.preventDefault();
if (!invalidKey) {
if (lastCharacterEntered === "." && e.key === ".") {
e.preventDefault();
} else {
lastCharacterEntered = e.key;
}
}
}
I just had the same problem and discovered an alternative solution using the validation API - works without black magic in all major browsers (Chrome, Firefox, Safari) except IE. This solution simply prevents users from entering invalid values.
I also included a fallback for IE, which is not nice but works at least.
Context: onInput function is called on input events, setInputValue is used to set the value of the input element, previousInputValue contains the last valid input value (updated in setInputValue calls).
function onInput (event) {
const inputValue = event.target.value;
// badInput supported on validation api (except IE)
// in IE it will be undefined, so we need strict value check
const badInput = event.target.validity.badInput;
// simply prevent modifying the value
if (badInput === true) {
// it's still possible to enter invalid values in an empty input, so we'll need this trick to prevent that
if (previousInputValue === '') {
setInputValue(' ');
setTimeout(() => {
setInputValue('');
}, 1);
}
return;
}
if (badInput === false) {
setInputValue(inputValue);
return;
}
// fallback case for IE and other abominations
// remove everything from the string expect numbers, point and comma
// replace comma with points (parseFloat works only with points)
let stringVal = String(inputValue)
.replace(/([^0-9.,])/g, '')
.replace(/,/g, '.');
// remove all but first point
const pointIndex = stringVal.indexOf('.');
if (pointIndex !== -1) {
const pointAndBefore = stringVal.substring(0, pointIndex + 1);
const afterPoint = stringVal.substring(pointIndex + 1);
// removing all points after the first
stringVal = `${pointAndBefore}${afterPoint.replace(/\./g, '')}`;
}
const float = parseFloat(stringVal);
if (isNaN(float)) {
// fallback to emptying the input if anything goes south
setInputValue('');
return;
}
setInputValue(stringVal);
}
Prevent typing non-Alphabet in specific input id for pages that have more than one input item.it's usable for Oracle Apex developers
--- Append in HTML header of page
<script type="text/javascript">
function validateNumber(event) {
const activeElmnt = document.activeElement;
var keyCode = event.keyCode;
var excludedKeys = [8, 37, 39, 46];
if ( activeElmnt.id == "input id in HTML page"){
if (!((keyCode >= 65 && keyCode <= 90) ||
(keyCode >= 97 && keyCode <= 122) ||
(excludedKeys.includes(keyCode)))) {
console.log("alphabets are not allowed");
event.preventDefault();
}
}
console.log("keycode: " + keyCode + "ActiveElemet: "+activeElmnt.id);
}
</script>
-- Append in page HTML Body attribute
onkeydown="validateNumber(event);"
here is my simple solution simply
in this solution u should keep the input type to text so when you use event.target.value you get the full string not only the numbers or an empty string instead so you actually can check if there is a point yet or not.
and i didn't use the deprecated properties event.which
isNumber(event) {
var allowed = "";
if (event.target.value.includes(".")) {
allowed = "123456789";
} else {
allowed = "123456789.";
}
if (!allowed.includes(event.key)) {
event.preventDefault();
}
}
document.getElementById('number').addEventListener('keypress', isNumber);
the HTML
```
function isNumber(event) {
var allowed = "";
if (event.target.value.includes(".")) {
allowed = "0123456789";
} else {
allowed = "0123456789.";
}
if (!allowed.includes(event.key)) {
event.preventDefault();
}
}
document.getElementById('number').addEventListener('keypress',isNumber);
<h3>You can input only numbers and one point (this would be a float or int) </h3>
<input type="text" id="number" />
This one should work. Only works with integers.
function validateNumberInput(e) {
if (isNaN(e.key)) {
e.preventDefault();
}
}
You can however implement floats with few more lines:
function validateNumberInput(e) {
if (isNaN(e.key) && e.key !== '.') {
e.preventDefault();
} else if (e.key === '.') {
if (e.target.value.indexOf('.') >= 0) {
e.preventDefault();
}
}
}
Finally use it like:
targetInput.addEventListener('keypress', function (e) {
validateNumberInput(e);
});
A very nice react solution... You just want to consume the event if its NaN
onKeyedPress = (e) => {
if(!parseInt(e.key)){
e.preventDefault();
}
}
Try it:
document.querySelector("input").addEventListener("keyup", function () {
this.value = this.value.replace(/\D/, "")
});
I have an input
<input required type="text" id="Editbox1"name="EditboxD" value="00" maxlength="2">
I need to check if the user wrote a repeated value like 00 or 22 while he is typing and showing alert !
Here is the shorthand most efficient way
var last;
document.getElementById('Editbox1').addEventListener('keypress',(e)=>last = (last === undefined) ? e.keyCode : (e.keyCode === last) ? alert('repeated data') : e.keyCode);
If you are only looking for 2 repeating characters then you could do this:
var lastKey = '';
$('#Editbox1').on('keyup', function(e) {
//You probably don't want to check to see if they entered backspace twice.
//You could also check for other keys like this for example the ENTER key or the TAB key
//It might even make more sense to use keyCode ranges depending on your use
if (e.keyCode === 8 ) {
return;
}
//if the current key and last key were the same
if (lastKey === String.fromCharCode(e.keyCode)) {
alert();
//otherwise store the current key into the lastKey var to be check on the next keypress
} else {
lastKey = String.fromCharCode(e.keyCode);
}
});
Using <input type=number> will cause this.value inside of an event listener to return an empty string if the input is not a valid number. You can see an example of this at http://jsfiddle.net/fSy53/
However, the invalid characters are still displayed in the input.
Is there any way to get the value that is actually displayed, including the invalid characters, from within an event listener?
My ultimate goal is to prevent users from actually typing any non-numeric characters into the field. I need to use type=number so that the numeric virtual keyboard is used by mobile devices. My goal would be to do something like this.value = this.value.replace(/[^0-9.]/g, "") on keyup keypress, but this doesn't work because if an invalid character is typed, reading from this.value returns "".
Try preventing the default behaviour if you don't like the incoming key value:
document.querySelector("input").addEventListener("keypress", function (evt) {
if (evt.which < 48 || evt.which > 57)
{
evt.preventDefault();
}
});
You can accomplish this by preventing the keyPress event from occurring for non-numeric values
e.g (using jQuery)
$('.input-selector').on('keypress', function(e){
return e.metaKey || // cmd/ctrl
e.which <= 0 || // arrow keys
e.which == 8 || // delete key
/[0-9]/.test(String.fromCharCode(e.which)); // numbers
})
This accounts for all different types of input (e.g. input from the number pad has different codes than the keyboard) as well as backspace, arrow keys, control/cmd + r to reload etc
Please note that e.which, e.keyCode and e.charCode are deprecated: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which
I prefer e.key:
document.querySelector("input").addEventListener("keypress", function (e) {
var allowedChars = '0123456789.';
function contains(stringValue, charValue) {
return stringValue.indexOf(charValue) > -1;
}
var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
|| e.key === '.' && contains(e.target.value, '.');
invalidKey && e.preventDefault();});
This function doesn't interfere with control codes in Firefox (Backspace, Tab, etc) by checking the string length: e.key.length === 1.
It also prevents duplicate dots at the beginning and between the digits: e.key === '.' && contains(e.target.value, '.')
Unfortunately, it doesn't prevent multiple dots at the end: 234....
It seems there is no way to cope with it.
The other answers seemed more complicated than necessary so I adapted their answers to this short and sweet function.
function allowOnlyNumbers(event) {
if (event.key.length === 1 && /\D/.test(event.key)) {
event.preventDefault();
}
}
It won't do change the behavior of any arrow, enter, shift, ctrl or tab keys because the length of the key property for those events is longer than a single character. It also uses a simple regular expressions to look for any non digit character.
inputs[5].addEventListener('keydown', enterNumbers);
function enterNumbers(event) {
if ((event.code == 'ArrowLeft') || (event.code == 'ArrowRight') ||
(event.code == 'ArrowUp') || (event.code == 'ArrowDown') ||
(event.code == 'Delete') || (event.code == 'Backspace')) {
return;
} else if (event.key.search(/\d/) == -1) {
event.preventDefault();
}
}
in this case, the value of the input field stays intact when a non-number button is pressed, and still delete, backspace, arrowup-down-left-right work properly and can be used for modifying the digital input.
This solution seems to be working well for me. It builds on #pavok's solution by preserving ctrl key commands.
document.querySelector("input").addEventListener("keypress", function (e) {
if (
e.key.length === 1 && e.key !== '.' && isNaN(e.key) && !e.ctrlKey ||
e.key === '.' && e.target.value.toString().indexOf('.') > -1
) {
e.preventDefault();
}
});
I will add MetaKey as well, as I am using MacOS
input.addEventListener("keypress", (e) => {
const key = e.key;
if (!(e.metaKey || e.ctrlKey) && key.length === 1 && !/\d\./.test(key)) {
e.preventDefault();
}
}
Or, you can try !isNaN(parseFloat(key))
try this one :
current key pressed -> e
if e is not a number -> isNaN(e.key)
when condition is true , so default action should not be taken as it normally would be -> e.preventDefault()
else, return default action... e
input.addEventListener("keypress", function (e) {
if (isNaN(e.key)) e.preventDefault();
});
Update on the accepted answer:
Because of many properties becoming deprecated
(property) KeyboardEvent.which: number #deprecated
you should just rely on the key property and create the rest of the logic by yourself:
The code allows Enter, Backspace and all numbers [0-9], every other character is disallowed.
document.querySelector("input").addEventListener("keypress", ({ key, preventDefault }) => {
if (isNaN(parseInt(key, 10)) && !['Backspace', 'Enter'].includes(key)) {
preventDefault();
}
});
NOTE
This will disable paste action
Based on Nrzonline's answer: I fixed the problem of the multiple "." at the end of the input by adding a
let lastCharacterEntered
outside of the input and then onKeyPress
e => {
var allowedChars = "0123456789.";
function contains(stringValue, charValue) {
return stringValue.indexOf(charValue) > -1;
}
var invalidKey =
(e.key.length === 1 && !contains(allowedChars, e.key)) ||
(e.key === "." && contains(e.target.value, "."));
console.log(e.target.value);
invalidKey && e.preventDefault();
if (!invalidKey) {
if (lastCharacterEntered === "." && e.key === ".") {
e.preventDefault();
} else {
lastCharacterEntered = e.key;
}
}
}
I just had the same problem and discovered an alternative solution using the validation API - works without black magic in all major browsers (Chrome, Firefox, Safari) except IE. This solution simply prevents users from entering invalid values.
I also included a fallback for IE, which is not nice but works at least.
Context: onInput function is called on input events, setInputValue is used to set the value of the input element, previousInputValue contains the last valid input value (updated in setInputValue calls).
function onInput (event) {
const inputValue = event.target.value;
// badInput supported on validation api (except IE)
// in IE it will be undefined, so we need strict value check
const badInput = event.target.validity.badInput;
// simply prevent modifying the value
if (badInput === true) {
// it's still possible to enter invalid values in an empty input, so we'll need this trick to prevent that
if (previousInputValue === '') {
setInputValue(' ');
setTimeout(() => {
setInputValue('');
}, 1);
}
return;
}
if (badInput === false) {
setInputValue(inputValue);
return;
}
// fallback case for IE and other abominations
// remove everything from the string expect numbers, point and comma
// replace comma with points (parseFloat works only with points)
let stringVal = String(inputValue)
.replace(/([^0-9.,])/g, '')
.replace(/,/g, '.');
// remove all but first point
const pointIndex = stringVal.indexOf('.');
if (pointIndex !== -1) {
const pointAndBefore = stringVal.substring(0, pointIndex + 1);
const afterPoint = stringVal.substring(pointIndex + 1);
// removing all points after the first
stringVal = `${pointAndBefore}${afterPoint.replace(/\./g, '')}`;
}
const float = parseFloat(stringVal);
if (isNaN(float)) {
// fallback to emptying the input if anything goes south
setInputValue('');
return;
}
setInputValue(stringVal);
}
Prevent typing non-Alphabet in specific input id for pages that have more than one input item.it's usable for Oracle Apex developers
--- Append in HTML header of page
<script type="text/javascript">
function validateNumber(event) {
const activeElmnt = document.activeElement;
var keyCode = event.keyCode;
var excludedKeys = [8, 37, 39, 46];
if ( activeElmnt.id == "input id in HTML page"){
if (!((keyCode >= 65 && keyCode <= 90) ||
(keyCode >= 97 && keyCode <= 122) ||
(excludedKeys.includes(keyCode)))) {
console.log("alphabets are not allowed");
event.preventDefault();
}
}
console.log("keycode: " + keyCode + "ActiveElemet: "+activeElmnt.id);
}
</script>
-- Append in page HTML Body attribute
onkeydown="validateNumber(event);"
here is my simple solution simply
in this solution u should keep the input type to text so when you use event.target.value you get the full string not only the numbers or an empty string instead so you actually can check if there is a point yet or not.
and i didn't use the deprecated properties event.which
isNumber(event) {
var allowed = "";
if (event.target.value.includes(".")) {
allowed = "123456789";
} else {
allowed = "123456789.";
}
if (!allowed.includes(event.key)) {
event.preventDefault();
}
}
document.getElementById('number').addEventListener('keypress', isNumber);
the HTML
```
function isNumber(event) {
var allowed = "";
if (event.target.value.includes(".")) {
allowed = "0123456789";
} else {
allowed = "0123456789.";
}
if (!allowed.includes(event.key)) {
event.preventDefault();
}
}
document.getElementById('number').addEventListener('keypress',isNumber);
<h3>You can input only numbers and one point (this would be a float or int) </h3>
<input type="text" id="number" />
This one should work. Only works with integers.
function validateNumberInput(e) {
if (isNaN(e.key)) {
e.preventDefault();
}
}
You can however implement floats with few more lines:
function validateNumberInput(e) {
if (isNaN(e.key) && e.key !== '.') {
e.preventDefault();
} else if (e.key === '.') {
if (e.target.value.indexOf('.') >= 0) {
e.preventDefault();
}
}
}
Finally use it like:
targetInput.addEventListener('keypress', function (e) {
validateNumberInput(e);
});
A very nice react solution... You just want to consume the event if its NaN
onKeyedPress = (e) => {
if(!parseInt(e.key)){
e.preventDefault();
}
}
Try it:
document.querySelector("input").addEventListener("keyup", function () {
this.value = this.value.replace(/\D/, "")
});
I wrote the following code (using jQuery) to show the pressed key.
$(window).keydown(function(e){
$("div").text("Key:" + String.fromCharCode(e.keyCode).toLowerCase());
return false;
});
This code works in normal alphabet characters (q,w,e,r...).
But when I press non alphabet keys (like ']'), an incorrect character is shown.
ex: ',' -> ¼, ']' -> ý
What's wrong with my code?
Use the keypress event and e.which property.
jQuery normalizes the keycodes, and stores the variable in event.which. The keypress event's which property is the only reliable value for String.fromCharCode.
The event.keyCode property may not be equal to the event.charCode or event.which properties.
For non-printable characters, event.which has a value of zero, contrary to event.keyCode. That's why you're seeing weird characters.
$(window).keypress(function(e) {
var charCode = e.which;
if (!charCode) { // <-- charCode === 0
return;// return false, optionally
}
$("div").text("Key:" + String.fromCharCode(charCode).toLowerCase());
return false; // Or e.preventDefault(); and/or e.stopPropagation()
}).keyup(function(e) {
// Key is lifted, do something
});
Greetings all. I have the following function to validate input depending if is numeric, alpha, alphanumeric and email:
function permite(e, permitidos) {
var key = e.keyCode || e.which;
//Validate if its an arrow or delete button
if((key == 46) || (key == 8) || (key >= 37 && key <= 40))
return true;
var keychar = String.fromCharCode(key);
switch(permitidos) {
case 'num':
permitidos = /^[0-9]$/;
break;
case 'car':
permitidos = /^[\sa-zA-Z]$/;
break;
case 'num_car':
permitidos = /^[\sa-zA-Z0-9]$/;
break;
case 'correo':
permitidos = /^[a-zA-Z0-9._\-+#]$/;
break;
}
return permitidos.test(keychar);
}
The var names are in spanish but its an easy function to understand.
The problem is the following. The keycode for '%' is 37 the same than the left arrow and the keycode for '(' is 40 the same than the right arrow. So my function is not validating '%' and '(' and it sucks. I dont know what to do, please help.
The keypress event doesn't fire for arrow and delete keys, so you can just remove your if statement. Darn you FireFox!
You are mixing up keyCode and charCode, which is understandable because event.keyCode actually contains charCode for keyPress events, unlike keydown and keyup. The keyCode for ( is 57 (same as for 9 - those characters are on the same key). Its charCode is 40. Arrow keys don't have charCodes, so they don't fire keypress events. (Except in FireFox... Argh!)
Your best bet is to use the keydown event and look for keyCode rather than charCode, checking for shift keys when necessary. You'll have to manually map keyCodes to characters when the shift key is pressed.
Slightly OT (apologies) but you may want to look at one of the Javascript libraries out there, for example JQuery; almost all of them come with (or have) libraries for "validating input".
For example: if you were using JQuery you may consider the "Validation" plugin - http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Check for whether the shift key is being pressed as well by checking event.shiftKey:
//Validate if its an arrow or delete button
if((key == 46) || (key == 8) || (key >= 37 && key <= 40 && !e.shiftKey))
return true;
Another option (depending on your application) is to handle the keydown event instead of the keypress event, which won't result in overlapping key codes.