Ist es ein float input type HTML5?

Laut html5.org, die "Anzahl" input type "value-Attribut, wenn angegeben und nicht leer ist, muss über einen Wert verfügen, der eine gültige floating point Zahl."

Aber es ist einfach (in der neuesten version von Chrome, sowieso), ein "updown" Steuern mit zahlen, nicht schwimmt:

HTML:

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

Gibt es eine floating-point-input-element nativen HTML5, oder ein Weg, um die Anzahl Art des Eingangs der Arbeit mit floats, ints nicht? Oder muss ich noch auf ein jQuery UI-plugin?

InformationsquelleAutor B. Clay Shannon | 2013-09-25

1430

Den number Typ hat eine step value controlling, die Nummern sind gültig (zusammen mit max und min), die standardmäßig auf 1. Dieser Wert wird auch von Implementierungen für die Schrittmotor-Tasten (D. H. durch drücken der up erhöht durch step).

Einfach diesen Wert zu ändern, was auch immer angemessen ist. Für das Geld, zwei Nachkommastellen sind wohl erwartet:
```
<input type="number" step="0.01">
```
(Ich würde auch set min=0 wenn es nur positiv sein kann)

Wenn Sie es vorziehen, zu erlauben, eine beliebige Anzahl von Dezimalstellen, die Sie verwenden können step="any" (obwohl für Währungen, würde ich empfehlen, kleben 0.01). In Chrome & Firefox, der Schrittmotor-Tasten Inkrementieren /Dekrementieren um 1, wenn mit any. (Dank an Michal Stefanow Antwort für den Hinweis any, und finden Sie in der jeweiligen Skillung hier)

Hier ist ein Spielplatz, die zeigen, wie die verschiedenen Schritte, die auf verschiedene input-Typen:

HTML:
```
<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, ich ' ll fügen Sie eine kurze Notiz: denken Sie daran, dass client-seitige Validierung ist nur eine Bequemlichkeit für den Benutzer. Sie müssen auch überprüfen, die auf der server-Seite!
- Antworten zu @Elfayer edit: Anführungszeichen sind in HTML optional, es sei denn, Sie wollen bestimmte Charaktere verwenden. Persönlich habe ich lieber weglassen, wenn möglich, für bessere Lesbarkeit.
- Dies ist nicht korrekt funktioniert in aktuellen Versionen von Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1003896
- Eine Zusammenfassung dieser Fehler behoben, FireFox wird nun abgeschnitten 0s wo möglich, so dass 4.10 erscheint als 4.1. Immer noch technisch korrekt Verhalten (die spec nur erfordert es, um zu zeigen, eine entsprechende Fließkomma-Darstellung), aber eine schlechte UI-im Falle der Währung. Ich möchte Menschen ermutigen, zu wählen, dass der Fehler. Sieht aus wie Sie könnte Anstoß für eine neue standard-Attribut zur Steuerung der Anzeige.
- Ja, technisch gesehen ist das weglassen von Anführungszeichen ist in Ordnung, immerhin stellt es eine Vielzahl von möglichen Problemen. Zuerst eine Teilmenge von Zeichen verarbeitet werden unterschiedlich in verschiedenen Browsern und Versionen davon. Wenn Sie nicht möchten, verwenden Sie Anführungszeichen, dann müssen Sie sich ständig bewusst, welche Zeichen zu Problemen führen wird, die in jedem browser und version. Das ist eine Menge mentale Kraft gewidmet, etwas, das nicht nötig zu befürchten, wenn Sie nur zitiert. (Forts.)
- Zweite, während Sie kann gut mit sich Gedanken über die Regeln, die Charaktere sind gut und welche nicht, der Entwickler, kommt hinter Sie wahrscheinlich nicht. Das erfordert dann, dass Sie entweder ertragen die schwierige Aufgabe, hinzufügen von Anführungszeichen, um alle Attribute, die Sie der linken ohne Anführungszeichen oder noch schlimmer, führen Sie einfach Probleme in dem code, die Sie vielleicht sogar nicht verstehen können, die Quelle. Schließlich, da man manchmal auch müssen verwenden Sie Anführungszeichen, der code sieht dann inkonsistent mit einigen Parametern zitiert werden und andere nicht.
- ist es möglich zu verbergen, die Anzahl incrementors
- siehe hier: stackoverflow.com/q/3790935/1180785, aber achten Sie darauf, Lesen die Kommentare für jede Antwort; es sieht aus wie alle Optionen haben Nachteile, und Sie müssen, um zu sehen, was passt Ihre Bedürfnisse zu finden.
- Sollten die Daten gespeichert werden) in ein decimal (10,2) in die Datenbank, oder sollte es etwas anderes verwenden? Ich Frage deshalb, weil wenn ich diese Art von input-Typ mit dem Schritt, alles nach dem Punkt nicht eingefügt bekommen. Ich habe versucht, die Konvertierung mit floatval (), aber es funktioniert nicht. Wenn ich geben Sie 37.50 in der Eingabe von mysql speichert die Anzahl wie 37.00. Haben Sie bekommen eine Ahnung? stackoverflow.com/questions/43164412/...
- <input type="number" step="0.01"> wenn ich wie dieser seine arbeiten von mir, aber ich versuche manuell hinzufügen, nicht annehmen .können wir manuell hinzufügen können
- Die Menschen sollten wirklich daran denken und lernen, die Verwendung von XHTML-Standards... Es gibt Antworten auf einfache Fragen wie die, die über Zitate.. ich Zwang mich zu lernen, diese standards und viele, viele, viele, viele Jahre her.... w3.org/TR/xhtml1/#h-4.4 All attribute values must be quoted, even those which appear to be numeric. Omiitting Zitate nur ärger.. noch dazu, wenn Sie dynamische Inhalte/Werte..
- Schritte auf dem datetime-local nicht zu funktionieren scheinen, in Google Chrome 62.0.3202.94, welche Browser hatte Sie im Hinterkopf, wenn Sie schreiben Sie Ihre Antwort wieder in 2013?
- Schritt auf datetime-local nicht ganz funktioniert damals. Ich Hinzugefügt, weil es in der Spezifikation und ich wollte, dass die Menschen in der Lage sein, um zu sehen, was funktioniert und funktioniert nicht. Es ist bedauerlich, dass es noch nicht geschehen ist. Wahrscheinlich erwies sich als viel schwieriger, als Sie erwartet haben. Es sollte funktionieren für Dinge wie ganze minute / Stunde / Tag weicht aber (zumindest in Chrome 62; nur das Letzte Beispiel in die Schnipsel, die ich geschrieben nicht funktioniert).
- Das ist einfach so random, ich wusste nie über diese in all diesen Jahren der Programmierung. Immer text -:))
InformationsquelleAutor Dave
135

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

Aber was, wenn Sie wollen, dass alle zahlen gültig sind, ganze zahlen und Dezimalzahlen gleichermaßen? Stellen Sie In diesem Fall Schritt auf "alle"
```
<input type="number" step="any" />
```
Funktioniert bei mir in Chrome nicht getestet, die in anderen Browsern.
- Chrome => Funktioniert perfekt, Safari => Wird nicht angezeigt, Fehlermeldung, und wenn nicht die Anzahl, es geht nicht um server, IE => Version weniger als 10 nicht funktioniert
- Leider gibt es in Chrom es ermöglicht Ihnen die Eingabe von mehreren Dezimalstellen, zum Beispiel eine IP-Adresse.
- Funktioniert nicht auf firefox
InformationsquelleAutor Mars Robertson
14

können Sie verwenden:
```
<input type="number" step="any" min="0" max="100" value="22.33">
```
hoffe auf Hilfe, Grüße

InformationsquelleAutor alvarodoune
8

Basierend auf diese 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 :

Char-code :
- 48-57 gleich 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- 0 Backspace(sonst müssen die Seite aktualisieren auf Firefox)
- 46 ist dot
&& ist AND , || ist OR Betreiber.

wenn Sie versuchen, float mit Komma :
```
<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 habe ich nicht vorhanden.)
- Fühlt sich rückwärts. Wie über copy & paste in das Feld?
- diese Methode verwenden, müssen aber die Validierung vor dem einfügen @MichalStefanow
- Hack für Eingabe -, hack für copy & paste, hack top hack = schlechte Praxis. Haben wir 2017
- Wo Lesen Sie alle Passwort-Eingaben ? Die Pflege, die Methode mit, nach einer Sitzung ? Nein, wir haben 1856 ! Versuchen Sie andere Benutzer !
- Klingt zu kompliziert, aber die Argumentation, die auf dieser Methode gegenüber den anderen genannten nicht zur Verfügung gestellt
- ich fügte || event.ctrlKey zu ermöglichen basic kopieren und einfügen. Aber ich würde nicht diesen Ansatz verwenden, wenn es nicht ein Prototyp
InformationsquelleAutor dsgdfg
8

Können Sie die Schritt-Attribut zum input-Typ number:
```
<input type="number" id="totalAmt" step="0.1"></input>
```
step="any" können alle Dezimalstellen.

step="1" zulassen wird, ohne Dezimalstellen.

step="0.5" erlauben 0.5; 1; 1.5; ...

step="0.1" ermöglichen 0.1; 0.2; 0.3; 0.4; ...

InformationsquelleAutor Andrei Thuler

Ich tun, damit

 <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 0.4, max 0.7 mit Schritt 0.01: 0.4, 0.41, 0,42 ... 0.7

InformationsquelleAutor sadalsuud

3

Ich hatte gerade das gleiche problem, und ich es beheben könnte nur darum, eine Komma und nicht ein Zeitraum/full stop in der Zahl wegen französische Lokalisierung.

Also es funktioniert mit:

2 ist OK

2,5 ist OK

2.5 ist KO (Die Zahl wird als "illegal" und erhalten Sie einen leeren Wert).
- hinzufügen lang="en" eingeben oder jedem Elternteil, und es beginnt mit Englisch Anzahl Stil
InformationsquelleAutor Stephane

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.