keyCode-Werte für Ziffernblock?

Haben die Zahlen auf einem Ziffernblock einen anderen Tastencode als die Zahlen oben auf einer Tastatur?

Hier ist etwas JavaScript, das beim Keyup-Ereignis ausgeführt werden soll, aber nur, wenn der Keycode zwischen 48 und 57 liegt. Hier ist der 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;
        . . . 

Mein Problem ist, dass dieser Code nur als Antwort auf die oben auf der Tastatur eingegebenen Zahlen ausgeführt wird, jedoch nicht als Antwort auf Zahlen, die über die Zehnertastatur eingegeben wurden.

Ich denke, die Antwort muss sein, dass der Ziffernblock unterschiedliche keyCode-Werte hat, aber wie finde ich heraus, was das sind?

Die Schlüsselcodes sind unterschiedlich. Die Tastatur 0-9 ist der Schlüsselcode 96für105

Ihre ifAussage sollte sein:

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

Hier ist eine Referenzanleitung für Schlüsselcodes

******************* Verwenden Sie KEYCODE !!!! ******************

Das Problem mit keyCode besteht darin, die kombinierten Tasten mit den Zahlen oben auf der Tastatur zu vermeiden. Wir müssen die Tasten "Shift" und "Alt" aktivieren , um Sonderzeichen wie e @ & "{} ... zu vermeiden.

Eine einfachste Lösung besteht darin, e.key in eine Zahl umzuwandeln und zu überprüfen, ob die Umwandlung NaN ergibt !

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

Seien Sie vorsichtig, wenn e.key null oder ein Leerzeichen ist , es gibt 0 !

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

Sie können einfach laufen

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

um die Codes der gedrückten Tasten in der Browserkonsole anzuzeigen.

Oder Sie finden Schlüsselcodes hier: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#Numpad_keys

keyCode unterscheidet sich für Zahlen auf dem Ziffernblock und Zahlen auf der Tastatur.

keyCodes:

Zahlen auf der Tastatur (0 - 9): 48 - 57
Zahlen auf dem Ziffernblock (0 - 9): 96 - 105

JavaScript-Bedingung:

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

Referenz für alle Schlüsselcodes (mit Demo): http://www.codeforeach.com/javascript/keycode-for-each-key-and-usage-with-demo

Für die Leute, die eine STRG + C, STRG-V-Lösung wollen, sind Sie hier:

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

Es verwendet die Logik der ersten Antwort.

Beachten Sie Folgendes, um einige der anderen Antworten zu ergänzen:

• keyupund keydown unterscheiden sich vonkeypress
• Wenn Sie verwenden möchten, String.fromCharCode()um die tatsächliche Ziffer zu erhalten keyup, müssen Sie zuerst die normalisieren keyCode.

Unten finden Sie ein selbstdokumentierendes Beispiel, das bestimmt, ob der Schlüssel numerisch ist und um welche Nummer es sich handelt (Beispiel verwendet die rangeFunktion vonlodash ).

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

Sie können die Schlüsselcodepage verwenden, um Folgendes zu finden:

event.code

um die Zifferntastatur zu unterscheiden.

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

Ja, sie sind unterschiedlich, und obwohl viele Leute einen großartigen Vorschlag gemacht haben, console.log zu verwenden, um sich selbst davon zu überzeugen. Ich habe jedoch niemanden gesehen, der event.location erwähnt hat, mit dem Sie feststellen können, ob die Nummer von der Tastatur stammt, event.location === 3und zwar oben auf der Haupttastatur / den allgemeinen Tasten event.location === 0. Dieser Ansatz eignet sich am besten, wenn Sie im Allgemeinen feststellen müssen, ob Tastenanschläge aus einem Bereich der Tastatur kommen oder nicht. Dies event.keyist wahrscheinlich besser für die jeweiligen Tasten.

Die Antwort von @ .A. Morchel finde ich die beste leicht verständliche Lösung mit geringem Platzbedarf. Ich wollte nur oben hinzufügen, wenn Sie eine kleinere Code-Menge möchten. Diese Lösung, die eine Modifikation von Morel ist, eignet sich gut, um keine Buchstaben jeglicher Art zuzulassen, einschließlich der Eingabe eines berüchtigten 'e'-Zeichens.

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

Laut Docs ist die Reihenfolge der Ereignisse im Zusammenhang mit dem Ereignis onkeyxxx angegeben:

1. Onkeydown
2. onkeypress
3. onkeyup

Wenn Sie den folgenden Code verwenden, passt er auch in die Rücktaste und gibt Benutzerinteraktionen ein. Nachdem Sie in onKeyPress- oder onKeyUp-Ereignissen das tun können, was Sie wollen. Codeblock-Trigger event.preventDefault-Funktion, wenn der Wert nicht number, backspace oder enter ist.

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

Sie können dies verwenden, um keyCodes einfach herauszufinden:

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

http://jsfiddle.net/vecvc4fr/