Gibt es einen Float-Eingabetyp in HTML5?

816

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?

B. Clay Shannon
quelle

Antworten:

1660

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!

Dave
quelle
1
So reagieren Sie auf die Bearbeitung von @ Elfayer: Anführungszeichen sind in HTML optional, es sei denn, Sie möchten bestimmte Zeichen verwenden. Persönlich ziehe ich es vor, sie wegzulassen, wenn dies zur besseren Lesbarkeit möglich ist.
Dave
5
Dies funktioniert in den neuesten Versionen von Firefox nicht richtig: bugzilla.mozilla.org/show_bug.cgi?id=1003896
trpt4him
7
@ Dave: Ja, technisch gesehen ist das Weglassen von Anführungszeichen in Ordnung, führt jedoch zu einer Reihe potenzieller Probleme. Erstens wird eine Teilmenge von Zeichen in verschiedenen Browsern und Versionen davon unterschiedlich behandelt. Wenn Sie keine Anführungszeichen verwenden, müssen Sie ständig wissen, welche Zeichen in jedem Browser und jeder Version Probleme verursachen. Das ist eine Menge mentaler Kraft, die für etwas aufgewendet wird, über das man sich überhaupt keine Sorgen machen muss, wenn man nur Anführungszeichen verwendet. (Fortsetzung)
Chris Pratt
9
Zweitens: Während Sie sich vielleicht Gedanken darüber machen, welche Regeln in Ordnung sind und welche nicht, wird der Entwickler, der hinter Ihnen steht, dies wahrscheinlich nicht tun. Das erfordert dann, dass sie entweder die mühsame Aufgabe ertragen, Anführungszeichen zu allen Attributen hinzuzufügen, die Sie nicht zitiert haben, oder schlimmer noch, einfach Probleme in den Code einfügen, deren Quelle sie möglicherweise nicht einmal verstehen. Schließlich, da manchmal werden Sie haben Anführungszeichen zu verwenden , um, sieht der Code dann im Widerspruch zu einigen Attributen zitiert und andere nicht.
Chris Pratt
2
@relipse siehe hier: stackoverflow.com/q/3790935/1180785, aber lesen Sie unbedingt die Kommentare für jede Antwort. Es sieht so aus, als hätten alle Optionen Nachteile, und Sie müssen sehen, was Ihren speziellen Anforderungen entspricht.
Dave
153

Ü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.

Mars Robertson
quelle
4
Chrome => Funktioniert perfekt Safari => Zeigt keine Fehlermeldung an, und wenn keine Nummer vorhanden ist, wird sie nicht an den Server-IE übergeben => Version unter 10 nicht, funktioniert
Abhi
4
Leider können Sie in Chrome mehrere Dezimalstellen eingeben, beispielsweise eine IP-Adresse.
Andy
18

Sie können verwenden:

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

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; ...

Andrei Thuler
quelle
8

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.)

dsgdfg
quelle
Fühlt sich rückwärts an. Wie wäre es mit Kopieren und Einfügen im Feld?
Mars Robertson
4
Hack für Eingabe, Hack für Copy & Paste, Hack auf Hack = schlechte Praxis. Wir haben 2017
Mars Robertson
Wo lesen Sie Passworteingaben? Wen interessiert es, welche Methode nach einer Sitzung angewendet wird? Nein, wir haben 1856! Versuchen Sie es mit einem anderen Benutzer!
dsgdfg
Klingt zu kompliziert, aber Argumentation zu dieser Methode im Vergleich zu anderen genannten nicht zur Verfügung gestellt
WebDude0482
6

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

sadalsuud
quelle
4

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).

Stephane
quelle
3
Wenn Sie lang = "en" zur Eingabe oder zu einem übergeordneten
Element