it-swarm.com.de

Umgang mit Floats und Dezimaltrennzeichen mit der Eingabetypnummer html5

Ich baue eine Web-App, die hauptsächlich für mobile Browser gedacht ist. Ich benutze Eingabefelder mit Nummerntyp, so dass (die meisten) mobilen Browser für eine bessere Benutzererfahrung nur die Nummerntastatur aufrufen. Diese Webanwendung wird hauptsächlich in Regionen verwendet, in denen das Dezimaltrennzeichen ein Komma und kein Punkt ist. Daher muss ich beide Dezimaltrennzeichen verarbeiten.

Wie kann man dieses ganze Durcheinander mit Punkt und Komma abdecken?

Meine Erkenntnisse:

Desktop Chrome

  • Eingabetyp = Nummer
  • Der Benutzer gibt "4,55" in das Eingabefeld ein
  • $("#my_input").val(); gibt "455" zurück
  • Ich kann den korrekten Wert nicht von der Eingabe erhalten

Desktop Firefox

  • Eingabetyp = Nummer
  • Der Benutzer gibt "4,55" in das Eingabefeld ein
  • $("#my_input").val(); gibt "4,55" zurück
  • Das ist in Ordnung, ich kann das Komma durch einen Punkt ersetzen und den korrekten Gleitkommawert erhalten

Android-Browser

  • Eingabetyp = Nummer
  • Der Benutzer gibt "4,55" in das Eingabefeld ein
  • Wenn die Eingabe den Fokus verliert, wird der Wert auf "4" abgeschnitten.
  • Für den Benutzer verwirrend

Windows Phone 8

  • Eingabetyp = Nummer
  • Der Benutzer gibt "4,55" in das Eingabefeld ein
  • $("#my_input").val(); gibt "4,55" zurück
  • Das ist in Ordnung, ich kann das Komma durch einen Punkt ersetzen und den korrekten Gleitkommawert erhalten

Was sind die "Best Practices" in solchen Situationen, in denen der Benutzer möglicherweise Komma oder Punkt als Dezimaltrennzeichen verwendet und ich den HTML-Eingabetyp als Zahl beibehalten möchte, um eine bessere Benutzererfahrung zu erzielen?

Kann ich Komma "on the fly" in Punkt umwandeln und wichtige Ereignisse binden? Funktioniert dies mit Zahleneingaben?

BEARBEITEN

Aktuell habe ich keine Lösung, wie man einen Gleitkommawert (als Zeichenkette oder Zahl) von einer Eingabe erhält, deren Typ auf Zahl gesetzt ist. Wenn der Endbenutzer "4,55" eingibt, gibt Chrome gibt immer "455" zurück, Firefox gibt "4,55" zurück, was in Ordnung ist.

Es ist auch ziemlich ärgerlich, dass in Android (getesteter 4.2-Emulator), wenn ich "4,55" in das Eingabefeld eingebe und den Fokus auf eine andere Stelle ändere, die eingegebene Zahl auf "4" abgeschnitten wird. .

118
devha

Ich denke, was in den obigen Antworten fehlt, ist die Notwendigkeit, einen anderen Wert für das step -Attribut anzugeben, das einen Standardwert von 1 Hat. Wenn der Validierungsalgorithmus der Eingabe Gleitkommawerte zulassen soll, geben Sie einen entsprechenden Schritt an.

Ich wollte zum Beispiel Dollarbeträge, also habe ich einen Schritt wie diesen angegeben:

 <input type="number" name="price"
           pattern="[0-9]+([\.,][0-9]+)?" step="0.01"
            title="This should be a number with up to 2 decimal places.">

Es ist nichts Falsches daran, jQuery zum Abrufen des Werts zu verwenden, aber Sie werden es nützlich finden, die DOM-API direkt zu verwenden, um die validity.valid - Eigenschaft des Elements abzurufen.

Ich hatte ein ähnliches Problem mit dem Dezimalpunkt, aber der Grund, warum ich feststellte, dass es ein Problem gab, war das Styling, das Twitter Bootstrap zu einer Zahleneingabe mit einem ungültigen Wert hinzufügt.

Hier ist eine Fiedel, die zeigt, dass das Hinzufügen des step -Attributs funktioniert und auch testet, ob der aktuelle Wert gültig ist:

TL; DR: Setzen Sie das Attribut a step auf einen Gleitkommawert, da der Standardwert 1.

[~ # ~] note [~ # ~] : Das Komma ist für mich nicht gültig, aber ich vermute es, wenn ich es einstelle Wenn ich die Sprache/Region meines Betriebssystems so einstelle, dass ein Komma als Dezimaltrennzeichen verwendet wird, funktioniert dies. * Hinweis in Hinweis *: Dies war nicht der Fall für die Sprach-/Tastatureinstellungen des Betriebssystems * Deutsch * in Ubuntu/Gnome 14.04.

102
natchiketa

Laut w3.org ist das value -Attribut von Zahleneingabe als Gleitkommazahl definiert. Die Syntax der Gleitkommazahl scheint nur Punkte als Dezimaltrennzeichen zu akzeptieren.

Im Folgenden sind einige Optionen aufgeführt, die für Sie hilfreich sein könnten:

1. Verwenden Sie das Musterattribut

Mit dem Attribut pattern können Sie das zulässige Format mit einem regulären Ausdruck HTML5-kompatibel festlegen. Hier können Sie angeben, dass das Komma erlaubt ist, und eine hilfreiche Rückmeldung, wenn das Muster fehlschlägt.

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" name="my-num"
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

Hinweis: Die browserübergreifende Unterstützung ist sehr unterschiedlich. Es kann vollständig, teilweise oder nicht vorhanden sein.

2. JavaScript-Validierung

Sie könnten versuchen, einen einfachen Rückruf an das Ereignis onchange (und/oder blur ) zu binden, das entweder das Komma ersetzen würde oder alle zusammen validieren.

3. Deaktivieren Sie die Browservalidierung ##

Drittens könnten Sie versuchen, das Attribut formnovalidate für die Zahleneingaben zu verwenden, um die Browservalidierung für dieses Feld insgesamt zu deaktivieren.

<input type="number" formnovalidate />

4. Kombination ..?

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" 
           name="my-num" formnovalidate
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>
22
kjetilh

Ob für das Dezimaltrennzeichen ein Komma oder ein Punkt verwendet wird, liegt ganz im Ermessen des Browsers. Der Browser entscheidet anhand des Gebietsschemas des Betriebssystems oder Browsers, oder einige Browser verwenden Hinweise von der Website. Ich habe eine Browser-Vergleichstabelle erstellt, die zeigt, wie verschiedene Browser unterschiedliche Lokalisierungsmethoden unterstützen. Safari ist der einzige Browser, der Kommas und Punkte austauschbar handhabt.

Grundsätzlich können Sie als Webautor dies nicht wirklich kontrollieren. Bei einigen Umgehungen werden zwei Eingabefelder mit ganzen Zahlen verwendet. Auf diese Weise kann jeder Benutzer die Daten wie erwartet eingeben. Es ist nicht besonders sexy, aber es wird in jedem Fall für alle Benutzer funktionieren.

8
Aeyoun

Verwenden Sie valueAsNumber anstelle von .val().

eingabe. valueAsNumber [= value]

Gibt gegebenenfalls eine Zahl zurück, die den Wert des Formularsteuerelements darstellt. Andernfalls wird null zurückgegeben.
Kann eingestellt werden, um den Wert zu ändern.
Löst eine INVALID_STATE_ERR-Ausnahme aus, wenn das Steuerelement weder datums- oder zeitbasiert noch numerisch ist.

7
Mike Samuel

Ich habe keine perfekte Lösung gefunden, aber das Beste, was ich tun konnte, war, type = "tel" zu verwenden und die HTML5-Validierung (formnovalidate) zu deaktivieren:

<input name="txtTest" type="tel" value="1,200.00" formnovalidate="formnovalidate" />

Wenn der Benutzer ein Komma eingibt, wird es mit dem Komma in jedem modernen Browser ausgegeben, den ich ausprobiert habe (aktuelles FF, IE, Edge, Oper, Chrome, Safari-Desktop, Android Chrome).

Das Hauptproblem ist:

  • Handybenutzer sehen ihre Telefontastatur, die sich möglicherweise von der Zifferntastatur unterscheidet.
  • Schlimmer noch, die Telefontastatur hat möglicherweise nicht einmal eine Kommataste.

Für meinen Anwendungsfall musste ich nur:

  • Zeigen Sie den Anfangswert mit einem Komma an (Firefox entfernt ihn für Typ = Zahl)
  • Nicht fehlschlagen HTML5-Validierung (wenn es ein Komma gibt)
  • Lass das Feld genau als Eingabe lesen (mit einem möglichen Komma)

Wenn Sie eine ähnliche Anforderung haben, sollte dies für Sie funktionieren.

Anmerkung: Die Unterstützung des Musterattributs hat mir nicht gefallen. Das Formnovalidat scheint viel besser zu wirken.

3
Bolo

verwendet einen Texttyp, erzwingt jedoch die Darstellung der numerischen Tastatur

<input value="12,4" type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

das InputMode-Tag ist die Lösung

2
David Navarro

Wenn Sie $("#my_input").val(); aufrufen, wird die Zeichenfolge als Variable zurückgegeben. Verwenden Sie also parseFloat und parseInt zum Konvertieren. Wenn Sie parseFloat auf Ihrem Desktop oder Telefon verwenden SELBST versteht die Bedeutung von Variablen.

Außerdem können Sie einen Gleitkommawert in einen String konvertieren, indem Sie toFixed verwenden, dessen Argument die Anzahl der Ziffern wie folgt angibt:

var i = 0.011;
var ss = i.toFixed(2); //It returns 0.01
1
user3511843

Klingt so, als ob Sie toLocaleString () für Ihre numerischen Eingaben verwenden möchten.

Informationen zur Verwendung finden Sie unter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString .

Die Lokalisierung von Zahlen in JS wird auch in Internationalisierung (Zahlenformatierung "num.toLocaleString ()") behandelt, die für Chrome nicht funktioniert

0
stackasec

Meine Empfehlung? Verwenden Sie jQuery überhaupt nicht. Ich hatte das gleiche Problem wie du. Ich fand, dass $('#my_input').val() immer ein seltsames Ergebnis liefert.

Versuchen Sie, document.getElementById('my_input').valueAsNumber anstelle von $("#my_input").val(); zu verwenden, und verwenden Sie dann Number(your_value_retrieved), um eine Zahl zu erstellen. Wenn der Wert NaN ist, wissen Sie sicher, dass dies keine Zahl ist.

Wenn Sie eine Zahl in die Eingabe eingeben, kann in die Eingabe fast jedes Zeichen eingegeben werden (ich kann das Euro-Zeichen, einen Dollar und alle anderen Sonderzeichen schreiben). Daher ist es am besten, den Wert mit abzurufen .valueAsNumber Anstelle von jQuery.

Übrigens, das ermöglicht Ihren Benutzern, Internationalisierung hinzuzufügen (d. H .: Unterstützen Sie Kommas anstelle von Punkten, um Dezimalzahlen zu erstellen). Lassen Sie das Number() -Objekt einfach etwas für Sie erstellen, und es ist sozusagen dezimalsicher.