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

Der number-Typ hat einen step-Wert, der steuert, welche Zahlen gültig sind (zusammen mit max und min), der standardmäßig auf 1 festgelegt ist. Dieser Wert wird auch von Implementierungen für die Steuerungsschaltflächen verwendet (d.h. Drücken von "hoch" erhöht um step).

Ändern Sie diesen Wert einfach auf das, was angemessen ist. Für Geld werden wahrscheinlich zwei Dezimalstellen erwartet:

Gesamtbetrag

(Ich würde auch min=0 festlegen, wenn es nur positiv sein kann)

Wenn Sie lieber eine beliebige Anzahl von Dezimalstellen zulassen möchten, können Sie step="any" verwenden (obwohl ich für Währungen empfehlen würde, bei 0.01 zu bleiben). In Chrome & Firefox erhöhen/verringern die Steuerungsschaltflächen bei Verwendung von any um 1. (Dank an Michal Stefanows Antwort für das Aufzeigen von any, und sehen Sie hier die entsprechende Spezifikation)

Hier ist ein Playground, der zeigt, wie sich verschiedene Schrittgrößen auf verschiedene Eingabetypen auswirken:

   Schritt 1 (Standard)
   Schritt 0.01
   Schritt beliebig
   Schritt 20
   Schritt 60 (Standard)
   Schritt 1
   Schritt beliebig
   Schritt 0.001
   Schritt 3600 (1 Stunde)
   Schritt 86400 (1 Tag)
   Schritt 70 (1 min, 10 sec)

---

Wie üblich möchte ich noch eine schnelle Anmerkung hinzufügen: Denken Sie daran, dass die Validierung auf der Client-Seite nur ein Komfort für den Benutzer ist. Sie müssen auch auf der Server-Seite validieren!

Answer 2

Über: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

Aber was ist, wenn Sie wollen, dass alle Zahlen gültig sind, sowohl Ganzzahlen als auch Dezimalzahlen? In diesem Fall setzen Sie Schritt auf "beliebig"

---

Funktioniert für mich in Chrome, nicht in anderen Browsern getestet.

Answer 3

Sie können verwenden:

Answer 4

Sie können das Step-Attribut für den Input-Typ Nummer verwenden:

step="any" erlaubt jede Dezimalzahl.
step="1" erlaubt keine Dezimalzahl.
step="0.5" erlaubt 0.5; 1; 1.5; ...
step="0.1" erlaubt 0.1; 0.2; 0.3; 0.4; ...

Answer 5

Basiert auf dieser Antwort

Bedeutung :

Zeichencode :

• 48-57 entspricht 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
• 0 ist Rücktaste(ansonsten ist ein Neuladen der Seite in Firefox erforderlich)
• 46 ist Punkt

&& ist der UND Operator, || ist der ODER Operator.

Wenn Sie einen Float mit Komma versuchen :

Unterstützt von Chromium und Firefox (Linux X64)(andere Browser existieren nicht.)