Значення keyCode для цифрової клавіатури?

Чи мають цифри на цифровій клавіатурі інший код клавіатури, ніж цифри у верхній частині клавіатури?

Ось деякий JavaScript, який повинен працювати під час події клавіатури, але лише якщо код ключа між 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, але як мені дізнатися, що це?

Коди клавіш різні. Клавіатура 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 @ & "{} ...

Найпростішим рішенням є перетворення e.key в число і перевірка, чи перетворення дає NaN !

let key = Number(e.key)
if (isNaN(key) || e.key === null || e.key === ' ') {
  console.log("is not numeric")
}
else {
  console.log("is numeric")
}

Будьте обережні, якщо e.key нульовий або пробіл , це дає 0 !

Number(5)         // => 5
Number('5')       // => 5
Number(null)      // => 0 
Number(' ')       // => 0
Number('chars')   // => NaN
Number(undefined) // => NaN

Ви можете просто бігти

$(document).keyup(function(e) {
    console.log(e.keyCode);
});

щоб побачити коди натиснутих клавіш у консолі браузера.

Або ви можете знайти ключові коди тут: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#Numpad_keys

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);

Ви можете використовувати кодову сторінку ключа, щоб знайти:

event.code

щоб розподілити цифрову клавіатуру.

https://keycode.info/

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
      }
   }
}

Так, вони різні, і хоча багато людей зробили чудову пропозицію використовувати console.log, щоб переконатися на власні очі. Однак я не бачив, щоб хтось згадував event.location, за яким ви можете визначити, чи надходить номер з клавіатури event.location === 3проти верхньої частини головної клавіатури / загальних клавіш event.location === 0. Цей підхід найкраще підходить для тих випадків, коли вам потрібно загалом визначити, чи натискання клавіш надходить з певної області клавіатури чи ні, event.keyшвидше за все, краще для конкретних клавіш.

Відповідь @ .A. Морель Я вважаю найкращим легко зрозумілим рішенням з невеликим розміром. Просто хотів додати зверху, якщо ви хочете меншу кількість коду, це рішення, яке є модифікацією Мореля, добре працює, не дозволяючи будь-яких літер, включаючи введення горезвісного символу "е".

function InputTypeNumberDissallowAllCharactersExceptNumeric() {
  let key = Number(inputEvent.key);
  return !isNaN(key);
}

Документи вказують порядок подій, пов’язаних з подією onkeyxxx:

1. onkeydown
2. onkeypress
3. onkeyup

Якщо ви використовуєте код, як показано нижче, він поєднується із зворотним простором та вводить взаємодію користувачів. Після того, як ви зможете робити те, що хочете, у подіях onKeyPress або onKeyUp. Функція блокування коду event.preventDefault, якщо значення не число, зворотний простір або enter.

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. Можливо, остерігайтеся розкладки мови клавіатури. Деякі розкладки клавіатури змінювали цифрові клавіші за замовчуванням на символи.

let key = parseInt(e.key)
if (isNaN(key)) {
  console.log("is not numeric")
}
else {
  console.log("is numeric")
}

Ви можете використовувати це, щоб легко зрозуміти коди ключів:

$(document).keyup(function(e) {
    // Displays the keycode of the last pressed key in the body
    $(document.body).html(e.keyCode);
});

http://jsfiddle.net/vecvc4fr/