Значения keyCode для цифровой клавиатуры?
Цифры на цифровой клавиатуре имеют другой код, чем цифры в верхней части клавиатуры?
Вот некоторый JavaScript, который должен запускаться при событии keyup, но только если код ключа находится между 48 и 57. Вот код:
$('#rollNum').keyup(function(e) {
if(e.keyCode >= 48 && e.keyCode <= 57) { //0-9 only
var max = 15;
var textLen = $(this).val().length;
var textLeft = max - textLen;
. . .
Моя проблема заключается в том, что этот код запускается только в ответ на цифры, введенные в верхней части клавиатуры, но не работает в ответ на цифры, введенные с цифровой клавиатуры.
Я думаю, что ответ должен состоять в том, что цифровая клавиатура имеет разные значения keyCode, но как мне узнать, что это такое?
13 ответов
Коды клавиш разные. Клавиатура 0-9 является Keycode 96 в 105
Ваш if Заявление должно быть:
if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
// 0-9 only
}
Проблема с keyCode заключается в том, чтобы избежать сочетания клавиш с цифрами на верхней части клавиатуры, мы должны добавить проверку клавиш "Shift" и "Alt", чтобы избежать специальных символов, таких как @ & "{}...
Самое простое решение - конвертировать e.key в число и проверить, дает ли конверсия NaN!
let key = Number(e.key)
if (isNaN(key)) {
console.log("is not numeric")
}
else {
console.log("is numeric")
}
Вы можете просто запустить
$(document).keyup(function(e) {
console.log(e.keyCode);
});
чтобы увидеть коды нажатых клавиш в консоли браузера.
Или вы можете найти ключевые коды здесь: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
Код клавиши отличается для чисел на цифровой клавиатуре и чисел на верхней части клавиатуры.
ключевые коды:
цифры сверху клавиатуры ( 0 - 9): 48 - 57
цифры на цифровой клавиатуре ( 0 - 9): 96 - 105
Условие JavaScript:
if((e.keyCode >= 48 && e.keyCode <=57) || (e.keyCode >= 96 && e.keyCode <=105)) {
// entered key is a number
}
Ссылка на все коды клавиш (с демо): http://www.codeforeach.com/javascript/keycode-for-each-key-and-usage-with-demo
Для людей, которые хотят решения CTRL+C, CTRL-V, вот вам:
/**
* Retrieves the number that was pressed on the keyboard.
*
* @param {Event} event The keypress event containing the keyCode.
* @returns {number|null} a number between 0-9 that was pressed. Returns null if there was no numeric key pressed.
*/
function getNumberFromKeyEvent(event) {
if (event.keyCode >= 96 && event.keyCode <= 105) {
return event.keyCode - 96;
} else if (event.keyCode >= 48 && event.keyCode <= 57) {
return event.keyCode - 48;
}
return null;
}
Используется логика первого ответа.
Чтобы добавить к другим ответам, обратите внимание, что:
keyupа такжеkeydownотличаться отkeypress- если вы хотите использовать
String.fromCharCode()чтобы получить фактическую цифру изkeyupсначала нужно нормализоватьkeyCode,
Ниже приведен пример самодокументирования, который определяет, является ли ключ числовым, а также с каким номером (пример использует range функция отlodash).
const isKeypad = range(96, 106).includes(keyCode);
const normalizedKeyCode = isKeypad ? keyCode - 48 : keyCode;
const isDigit = range(48, 58).includes(normalizedKeyCode);
const digit = String.fromCharCode(normalizedKeyCode);
Да, они разные, и хотя многие люди сделали отличное предложение использовать console.log, чтобы убедиться в этом сами. Однако я не видел, чтобы кто-нибудь упоминал event.location, чтобы вы могли использовать это, чтобы определить, поступает ли номер с клавиатуры.event.location === 3 против верхней части основной клавиатуры / общих клавиш event.location === 0. Этот подход лучше всего подходит для случаев, когда вам нужно в целом определить, исходят ли нажатия клавиш из области клавиатуры или нет,event.key вероятно, лучше для конкретных ключей.
Вы можете использовать ключевую кодовую страницу, чтобы найти:
event.code
для изменения цифровой клавиатуры.
function getNumberFromKeyEvent(event) {
if (event.code.indexOf('Numpad') === 0) {
var number = parseInt(event.code.replace('Numpad', ''), 10);
if (number >= 0 && number <= 9) {
// numbers from numeric keyboard
}
}
}
Документы говорят о порядке событий, связанных с событием onkeyxxx:
- onkeydown
- onkeypress
- onkeyup
Если вы используете код, подобный приведенному ниже, он также подходит для возврата и ввода пользовательских взаимодействий. После того, как вы можете делать то, что хотите, в событиях onKeyPress или onKeyUp. Кодовый блок запускает функцию event.preventDefault, если значение не является числом, пробелом или вводом.
onInputKeyDown = event => {
const { keyCode } = event;
if (
(keyCode >= 48 && keyCode <= 57) ||
(keyCode >= 96 && keyCode <= 105) ||
keyCode === 8 || //Backspace key
keyCode === 13 //Enter key
) {
} else {
event.preventDefault();
}
};
Ответ от @.A. Морель, я считаю, является лучшим, легким для понимания решением с небольшой площадью. Я просто хотел добавить сверху, если вы хотите меньший объем кода, это решение, являющееся модификацией Morel, хорошо работает, так как не допускает использование букв любого рода, включая вводимые символы пресловутого символа 'e'.
function InputTypeNumberDissallowAllCharactersExceptNumeric() {
let key = Number(inputEvent.key);
return !isNaN(key);
}
Немного прояснил ответ @A.Morel. Вы можете остерегаться языковой раскладки клавиатуры. Некоторые раскладки клавиатуры заменили цифровые клавиши по умолчанию на символы.
let key = parseInt(e.key)
if (isNaN(key)) {
console.log("is not numeric")
}
else {
console.log("is numeric")
}
Вам нужно проверить преобразование в число между 0-9. Таким образом, мы можем создать массив диапазонов 0-9 с помощьюArray.from(Array(10).keys())и проверьтеevent.keyнаходится в этом диапазоне или нет.
const isNumeric = Array.from(Array(10).keys()).includes(Number(event.key));
Вы можете использовать это, чтобы легко определить ключевые коды:
$(document).keyup(function(e) {
// Displays the keycode of the last pressed key in the body
$(document.body).html(e.keyCode);
});