HTML-Texteingabe erlaubt nur numerische Eingaben

Question

Gibt es eine schnelle Möglichkeit, eine HTML-Texteingabe ( <input type=text /> ), um nur numerische Tastenanschläge (plus '.') zuzulassen?

Answer 1

Ich habe viele Fragen gesehen, die dies mit Javascript beantworten, aber die beste Antwort ist die Verwendung der type="number" und entfernen Sie den Spin-Button mit css. Der Hauptgrund, warum dies notwendig ist, ist, dass der Spin-Button nicht die change Ereignis, wenn es verwendet wird.

Lösung:

HTML

<input type="number" class="input-class">

CSS

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Answer 2

Ich persönlich empfehle die Verwendung des autoNumeric-Plugins von http://www.decorplanit.com/plugin/ - Es unterstützt alle möglichen Variationen wie die Behandlung von Präfixen/Suffixen, die Behandlung von Währungen, die Formatierung negativer Werte, Minimal- und Maximalwerte usw.

Answer 3

Die folgende Funktion prüft für jedes Eingabezeichen, ob es eine Zahl ist.

numeric: value => {
    let numset = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);
    console.log(numset.has(value.substring(value.length - 1, value.length)));
}