web-dev-qa-db-fra.com

Les valeurs de keyCode pour le pavé numérique?

Les numéros sur un pavé numérique ont-ils un code de touche différent de celui situé en haut du clavier?

Voici du code JavaScript censé s'exécuter sur l'événement keyup, mais uniquement si le code clé est compris entre 48 et 57. Voici le code:

$('#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;
        . . .

Mon problème est que ce code ne fonctionne qu'en réponse aux nombres entrés en haut du clavier, mais ne s'exécute pas en réponse à des chiffres entrés à partir du pavé numérique.

Je pense que la réponse doit être que le pavé numérique a différentes valeurs de keyCode, mais comment puis-je savoir quelles sont ces valeurs?

javascriptjqueryweb-applicationsnumeric-keypad
63
DanielAttard

Les keycodes sont différents. Le clavier 0-9 est Keycode 96 à 105

Votre déclaration if devrait être:

if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) { 
    // 0-9 only
}

Voici un guide de référence pour les codes clés

146
Rory McCrossan

******************* ne pas utiliser KEYCODE !!!! *************** ***

Le problème avec keyCode est d’éviter les touches combinées avec les chiffres au-dessus du clavier, nous devons ajouter une vérification sur la touche "Shift" et "Alt " pour éviter des caractères spéciaux tels que e @ &" {} ...

Une solution simple consiste à convertir e.key en un nombre et à vérifier si la conversion donne NaN!

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

Attention si e.key est null, cela donne !

Number(5)         // => 5
Number('5')       // => 5
Number(null)      // => 0
Number('chars')   // => NaN
Number(undefined) // => NaN
10
A. Morel

Vous pouvez simplement courir

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

pour voir les codes des touches enfoncées dans la console du navigateur.

Ou vous pouvez trouver les codes de clé ici: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#Numpad_keys

8
Zhegan

keyCode est différent pour les chiffres sur le pavé numérique et les chiffres sur le dessus du clavier.

keyCodes:

chiffres en haut du clavier (0 - 9): 48 - 57
chiffres sur le pavé numérique (0 - 9): 96 - 105

Condition JavaScript:

if((e.keyCode >= 48 && e.keyCode <=57) || (e.keyCode >= 96 && e.keyCode <=105)) { 
    // entered key is a number
}

Référence pour tous les codes de touche (avec démo): http://www.codeforeach.com/javascript/keycode-for-each-key-and-usage-with-demo

2
Prashanth

Pour les personnes qui souhaitent une solution CTRL + C, CTRL-V, voici ce que vous devez faire:

    /**
     * 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;
    }

Il utilise la logique de la première réponse.

0
Jelle

La réponse de @ .A. Je trouve que Morel est la meilleure solution facile à comprendre avec un faible encombrement. Je voulais juste ajouter en plus si vous voulez un montant de code inférieur à cette solution qui est une modification de Morel fonctionne bien pour ne pas autoriser les lettres de toute sorte, y compris les entrées notoires "e" caractère.

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

Pour ajouter à certaines des autres réponses, notez que:

  • keyup et keydowndiffèrent de keypress
  • si vous voulez utiliser String.fromCharCode() pour obtenir le chiffre réel de keyup, vous devez d'abord normaliser le keyCode.

Vous trouverez ci-dessous un exemple auto-documenté qui détermine si la clé est numérique, ainsi que son numéro (cet exemple utilise la fonction range de 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);
0
jabacchetta