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

Sie können auch Eingabewerte (die standardmäßig als Zeichenkette behandelt werden) mit sich selbst vergleichen, die als numerisch erzwungen werden, z. B:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Allerdings müssen Sie das an Ereignisse wie Keyup etc. binden.

Answer 2

Meine Lösung für ein besseres Nutzererlebnis:

HTML

<input type="tel">

jQuery

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9','.']
  return keys.indexOf(event.key) > -1
})

Einzelheiten:

Zuallererst, Eingabearten :

number zeigt Auf-/Abwärtspfeile an, die den eigentlichen Eingabebereich verkleinern; ich finde sie hässlich und sie sind nur nützlich, wenn die Zahl eine Menge darstellt (Dinge wie Telefone, Vorwahlen, IDs... brauchen sie nicht) tel bietet ähnliche Browser-Validierungen von Zahlen ohne Pfeile

Die Verwendung von [number / tel] hilft auch bei der Anzeige der numerischen Tastatur auf mobilen Geräten.

Für die JS-Validierung brauchte ich am Ende 2 Funktionen, eine für die normale Benutzereingabe (Tastendruck) und die andere für eine Copy+Paste-Korrektur (Änderung), andere Kombinationen würden mir eine schreckliche Benutzererfahrung bescheren.

Ich benutze die zuverlässiger KeyboardEvent.key anstelle der jetzt veraltet KeyboardEvent.charCode

Abhängig von der Unterstützung Ihres Browsers können Sie auch die Verwendung von Array.prototype.includes() anstelle des schlecht benannten Array.prototype.indexOf() (für richtige/falsche Ergebnisse)

Answer 3

Wenn ich Ihre Frage verstanden habe, ist das im Grunde die Antwort

<input type="number">

Answer 4

Dies ist eine verbesserte Funktion:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

Answer 5

Hier ist meine einfache Lösung nur für React-Benutzer Ich konnte keine bessere Lösung finden und habe meine eigene gefunden. 3 Schritte.

Erstellen Sie zunächst einen Zustand.

const [tagInputVal, setTagInputVal] = useState("");

Verwenden Sie dann den Zustand als Eingabewert ( value={tagInputVal} ) und übergeben das Ereignis an die onChange Handler.

<input id="tag-input" type="text" placeholder="Add a tag" value={tagInputVal} onChange={(e) => onChangeTagInput(e)}></input>

Dann setzen Sie den Wert des Ereignisses in onChange Handler.

function onChangeTagInput(e) {
    setTagInputVal(e.target.value.replace(/[^\d.]/ig, ""));
}