Valeurs de keyCode pour le clavier numérique ?

Question

Les chiffres d'un pavé numérique ont-ils un code différent de celui des chiffres situés en haut d'un clavier ?

Voici du JavaScript qui est censé s'exécuter sur l'événement keyup, mais seulement 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 s'exécute qu'en réponse aux chiffres saisis en haut du clavier, mais pas en réponse aux chiffres saisis à partir du pavé numérique.

Je pense que la réponse doit être que le clavier numérique a des valeurs de keyCode différentes, mais comment puis-je les trouver ?

Answer 1

Oui, ils sont différents et, bien que de nombreuses personnes aient fait une excellente suggestion d'utiliser console.log pour voir par vous-même. Cependant, je n'ai vu personne mentionner event.location que vous pouvez utiliser pour déterminer si le numéro provient du clavier. event.location === 3 vs le haut du clavier principal / touches générales event.location === 0 . Cette approche est la plus adaptée lorsque vous devez déterminer de manière générale si les frappes proviennent d'une région du clavier ou non, event.key est probablement meilleur pour les clés spécifiques.

Answer 2

Vous pouvez utiliser la page de code clé afin de trouver le code :

code.événement

pour différencier le clavier numérique.

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

Answer 3

Le Docs indique l'ordre des événements liés à l'événement onkeyxxx :

1. onkeydown
2. surkeypress
3. onkeyup

Si vous utilisez le code ci-dessous, il s'adapte également aux interactions de l'utilisateur avec le retour arrière et la saisie. Après vous pouvez faire ce que vous voulez dans les événements onKeyPress ou onKeyUp. Le bloc de code déclenche la fonction event.preventDefault si la valeur n'est pas un nombre, backspace ou 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();
    }
  };

Answer 4

La réponse de @.A. Morel me semble être la meilleure solution, facile à comprendre et à faible encombrement. Je voulais juste ajouter que si vous voulez un code plus petit, cette solution qui est une modification de Morel fonctionne bien pour ne pas autoriser les lettres de toute sorte, y compris les entrées du fameux caractère 'e'.

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

Answer 5

Un peu plus clair dans la réponse de @A.Morel. Vous pouvez vous méfier de la disposition linguistique du clavier. Certaines dispositions de clavier ont changé les touches numériques par défaut en symboles.

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