Gibt es einen Float-Eingabetyp in HTML5?

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

Es handelt sich jedoch einfach (jedenfalls in der neuesten Version von Chrome) um ein "Updown" -Steuerelement mit Ganzzahlen, nicht um Floats:

<input type="number" id="totalAmt"></input>

Gibt es ein in HTML5 natives Gleitkomma-Eingabeelement oder eine Möglichkeit, den Zahleneingabetyp mit Gleitkommazahlen und nicht mit Ints zu arbeiten? Oder muss ich auf ein jQuery UI-Plugin zurückgreifen?

Der numberTyp hat einen stepWert, der steuert, welche Zahlen gültig sind (zusammen mit maxund min) und welcher Standardwert ist 1. Dieser Wert wird auch von Implementierungen für die Schritttasten verwendet (dh das Drücken nach oben erhöht sich um step).

Ändern Sie diesen Wert einfach auf den entsprechenden Wert. Für Geld werden wahrscheinlich zwei Dezimalstellen erwartet:

<input type="number" step="0.01">

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

Wenn Sie eine beliebige Anzahl von Dezimalstellen zulassen möchten, können Sie diese verwenden step="any"(für Währungen würde ich jedoch empfehlen, sich daran zu halten 0.01). In Chrome & Firefox werden die Schritttasten bei Verwendung um 1 erhöht / verringert any. (Dank an Michal Stefanows Antwort für den Hinweis anyund die entsprechende Spezifikation hier )

Hier ist ein Spielplatz, der zeigt, wie sich verschiedene Schritte auf verschiedene Eingabetypen auswirken:

<form>
  <input type=number step=1 /> Step 1 (default)<br />
  <input type=number step=0.01 /> Step 0.01<br />
  <input type=number step=any /> Step any<br />
  <input type=range step=20 /> Step 20<br />
  <input type=datetime-local step=60 /> Step 60 (default)<br />
  <input type=datetime-local step=1 /> Step 1<br />
  <input type=datetime-local step=any /> Step any<br />
  <input type=datetime-local step=0.001 /> Step 0.001<br />
  <input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
  <input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
  <input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>

Wie üblich füge ich einen kurzen Hinweis hinzu: Denken Sie daran, dass die clientseitige Validierung für den Benutzer nur eine Annehmlichkeit ist. Sie müssen auch auf der Serverseite validieren!

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

Aber was ist, wenn alle Zahlen gültig sein sollen, ganze Zahlen und Dezimalstellen gleichermaßen? Setzen Sie in diesem Fall den Schritt auf "any".

<input type="number" step="any" />

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

Sie können verwenden:

<input type="number" step="any" min="0" max="100" value="22.33">

Sie können das Schrittattribut für die Eingabetypnummer verwenden:

<input type="number" id="totalAmt" step="0.1"></input>

step="any"erlaubt jede Dezimalstelle.
step="1"erlaubt keine Dezimalstelle.
step="0.5"erlaubt 0,5; 1; 1,5; ...
step="0.1"erlaubt 0,1; 0,2; 0,3; 0,4; ...

Basierend auf dieser Antwort

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

Bedeutung:

Zeichencode:

• 48-57 gleich 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
• 0 ist Backspace(andernfalls muss die Seite in Firefox aktualisiert werden)
• 46 ist dot

&&ist AND, ||ist ORBetreiber.

Wenn Sie versuchen, mit Komma zu schweben:

<input type="text" id="sno" placeholder="Only float with comma !"   
     onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
     event.charCode == 44 || event.charCode == 0 ">

Unterstützt Chromium und Firefox (Linux X64) (andere Browser gibt es nicht.)

Ich mache das

 <input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

dann definiere ich min in 0,4 und max in 0,7 mit Schritt 0,01: 0,4, 0,41, 0,42 ... 0,7

Ich hatte gerade das gleiche Problem, und ich konnte es beheben , indem nur ein Putting Komma und keinen Zeitraum / Stillstand der Zahl wegen Französisch Lokalisierung .

So funktioniert es mit:

2 ist OK

2,5 ist in Ordnung

2,5 ist KO (Die Nummer gilt als "illegal" und Sie erhalten einen leeren Wert).