Gibt es einen Gleitkommawert-Eingabetyp in HTML5?

Question

Laut html5.org muss das "value"-Attribut des Eingabetyps "number", wenn es angegeben und nicht leer ist, einen Wert enthalten, der eine gültige Gleitkommazahl ist.

In der neuesten Version von Chrome ist es jedoch einfach nur eine "UpDown"-Steuerung mit Ganzzahlen, nicht mit Fließkommazahlen:

Gibt es ein Gleitkommazahl-Eingabeelement, das in HTML5 integriert ist, oder eine Möglichkeit, den Eingabetyp "number" so zu verwenden, dass er mit Gleitkommazahlen und nicht mit Ganzzahlen funktioniert? Oder muss ich auf ein jQuery UI-Plugin zurückgreifen?

Answer 1

Ich tue das

dann setze ich min auf 0.4 und max auf 0.7 mit Schritt 0.01: 0.4, 0.41, 0,42 ... 0.7

Answer 2

Ich habe angefangen, inputmode="decimal" zu verwenden, was einwandfrei mit Smartphones funktioniert:

Bitte beachten Sie, dass wir type="text" anstelle von number verwenden müssen. Auf dem Desktop lässt es jedoch immer noch Buchstaben als Werte zu.

Für den Desktop könnten Sie folgendes verwenden:

was die Eingabe von 0-9 und . als Eingabe und nur Zahlen ermöglicht.

Bitte beachten Sie, dass einige Länder , als Dezimaltrennzeichen verwenden, das standardmäßig auf der NumPad aktiviert ist. Daher würde das Eingeben einer Dezimalzahl über den Nummernblock nicht funktionieren, da das Eingabefeld ein . erwartet (in Chrome). Deshalb sollten Sie type="text" verwenden, wenn Sie internationale Benutzer auf Ihrer Website haben.

Sie können dies auf dem Desktop (auch mit Numpad) und Ihrem Telefon ausprobieren:

Eingabe mit Typ Text:

Eingabe mit Typ Nummer:

Referenz: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Answer 3

Ja, dies ist die korrekte Antwort:

step="any"

Dies ist effizienter. Vertrau mir.

document.getElementById('form1').addEventListener('submit', function(e){
e.preventDefault();
alert("Ihre Nummer ist: "+document.getElementById('n1').value)
alert("Dies funktioniert, nicht wahr? :) Bitte positiv bewerten")
})

Absenden

Answer 4

Ich hatte gerade das gleiche Problem und konnte es lösen, indem ich einfach ein Komma und kein Punkt/Punkt in die Zahl setze, wegen der französischen Lokalisierung.

Also funktioniert es mit:

2 ist OK

2,5 ist OK

2.5 ist KO (Die Zahl wird als "ungültig" betrachtet und du erhältst einen leeren Wert).

Answer 5

Dies hat bei mir funktioniert und ich denke, es ist der einfachste Weg, um das Eingabefeld dazu zu bringen, beliebige Dezimalzahlen unabhängig von der Länge des Dezimalteils zu akzeptieren. Das step-Attribut zeigt dem Eingabefeld tatsächlich, wie viele Dezimalstellen akzeptiert werden sollen. Zum Beispiel, step="0.01" akzeptiert nur zwei Dezimalstellen.