Ich baue eine Web-App, die hauptsächlich für mobile Browser ist. Ich verwende Eingabefelder mit Nummerntyp, daher rufen (die meisten) mobilen Browser zur besseren Benutzererfahrung nur die Zifferntastatur auf. Diese Web-App 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 Ergebnisse:
Desktop Chrome
- Eingabetyp = Nummer
- Der Benutzer gibt "4,55" in das Eingabefeld ein
$("#my_input").val();
gibt "455" zurück- Ich kann nicht den richtigen Wert 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 Komma durch Punkt ersetzen und den richtigen Float 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" gekürzt.
- Verwirrend für den Benutzer
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 Komma durch Punkt ersetzen und den richtigen Float 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, um Schlüsselereignisse zu binden? Funktioniert es mit Zahleneingaben?
BEARBEITEN
Derzeit habe ich keine Lösung, wie man den Gleitkommawert (als Zeichenfolge oder Zahl) von der Eingabe erhält, deren Typ auf Zahl gesetzt ist. Wenn der Endbenutzer "4,55" eingibt, gibt Chrome 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) die eingegebene Zahl auf "4" gekürzt wird, wenn ich "4,55" in das Eingabefeld eingebe und den Fokus auf eine andere Stelle ändere.
.val()
und Android macht etwas Seltsames. Können Sie überprüfen, ob sie sich gleich verhalten, wenn Sie die Systemsprache auf einen geeigneten Wert einstellen?var number = $(...).get(0).valueAsNumber;
if (isNaN(number)) number = parseFloat($(...).val().replace(',', '.');
Aber diese Lösung funktioniert nur, wenn das DieAntworten:
Ich denke, was in den obigen Antworten fehlt, ist die Notwendigkeit, einen anderen Wert für das
step
Attribut anzugeben , der einen Standardwert von hat1
. Wenn der Validierungsalgorithmus der Eingabe Gleitkommawerte zulassen soll, geben Sie einen entsprechenden Schritt an.Zum Beispiel wollte ich Dollarbeträge, also habe ich einen Schritt wie diesen angegeben:
Es ist nichts Falsches daran, den Wert mit jQuery abzurufen, aber Sie werden es nützlich finden, die DOM-API direkt zu verwenden, um die
validity.valid
Eigenschaft der Elemente 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 einer Zahleneingabe mit einem ungültigen Wert hinzufügt.
Hier ist eine Geige, 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 a-
step
Attribut auf einen Gleitkommawert, da es standardmäßig verwendet wird1
.HINWEIS : Das Komma wird für mich nicht überprüft, aber ich vermute, dass es funktionieren würde, wenn ich die Einstellungen für die Sprache / Region meines Betriebssystems auf einen Ort setze, an dem ein Komma als Dezimaltrennzeichen verwendet wird. * Anmerkung in Anmerkung *: Dies war bei Betriebssystem- / Tastatureinstellungen nicht der Fall. * Deutsch * in Ubuntu / Gnome 14.04.
quelle
step
Attribut"any"
anstelle von z"0.01"
. B. wie hier gezeigt an. Sehen Sie sich diese optimierte Version von Nathciketas Geige für eine Demo an.<input type="number" step="any">
. Ich konnte keine Möglichkeit finden, die HTML5-Validierung zu deaktivieren. Ich kann die Fehlermeldung deaktivieren oder anpassen, aber das Abrufen des Werts von der Eingabe ist immer ein Crapshoot. Irgendwelche Ideen?This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
Also Muster ist nutzlos mittype="number"
type
intext
, sonst macht Ihre Antwort keinen Sinn.Nach w3.org der Wert Attribut der Nummer eingegeben wird , als definierter Gleitkommazahl . Die Syntax der Gleitkommazahl scheint nur Punkte als Dezimaltrennzeichen zu akzeptieren.
Ich habe nachfolgend einige Optionen aufgeführt, die für Sie hilfreich sein könnten:
1. Verwenden des Musterattributs
Mit dem Musterattribut können Sie das zulässige Format mit einem regulären Ausdruck auf HTML5-kompatible Weise angeben. Hier können Sie angeben, dass das Kommazeichen zulässig ist, und eine hilfreiche Rückmeldung erhalten, wenn das Muster fehlschlägt.
Hinweis: 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 beispielsweise an den Wechsel (und / oder die Unschärfe) zu binden ) Fall , dass das Komma entweder ersetzen würde oder alle zusammen validieren.
3. Deaktivieren Sie die Browserüberprüfung ##
Drittens könnten Sie versuchen, das Attribut formnovalidate für die Zahleneingaben zu verwenden, um die Browserüberprüfung für dieses Feld insgesamt zu deaktivieren.
4. Kombination ..?
quelle
Ob für das Dezimaltrennzeichen Komma oder Punkt verwendet wird, liegt ganz beim Browser. Der Browser trifft seine Entscheidung basierend auf dem Gebietsschema des Betriebssystems oder Browsers, oder einige Browser nehmen Hinweise von der Website entgegen. 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 verarbeitet.
Grundsätzlich können Sie als Webautor dies nicht wirklich kontrollieren. Bei einigen Problemumgehungen werden zwei Eingabefelder mit Ganzzahlen 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.
quelle
Verwenden Sie
valueAsNumber
anstelle von.val()
.quelle
NaN
.Verwendet einen Texttyp, erzwingt jedoch das Erscheinungsbild der numerischen Tastatur
Das InputMode-Tag ist die Lösung
quelle
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:
Wenn der Benutzer ein Komma eingibt, wird es in jedem modernen Browser, den ich ausprobiert habe, mit dem Komma ausgegeben (neuestes FF, IE, Edge, Oper, Chrome, Safari Desktop, Android Chrome).
Das Hauptproblem ist:
Für meinen Anwendungsfall musste ich nur:
Wenn Sie eine ähnliche Anforderung haben, sollte dies für Sie funktionieren.
Hinweis: Die Unterstützung des Musterattributs hat mir nicht gefallen. Das Formnovalidat scheint viel besser zu funktionieren.
quelle
Wenn Sie es aufrufen, wird
$("#my_input").val();
es als Zeichenfolgenvariable zurückgegeben. Also verwendenparseFloat
undparseInt
zum Konvertieren. Wenn SieparseFloat
Ihren Desktop oder Ihr Telefon verwenden, versteht ITSELF die Bedeutung von Variablen.Außerdem können Sie einen Float in einen String konvertieren, indem Sie
toFixed
ein Argument verwenden, das die Anzahl der Ziffern wie folgt enthält:quelle
Meine Empfehlung? Verwenden Sie jQuery überhaupt nicht. Ich hatte das gleiche Problem wie du. Ich fand, dass
$('#my_input').val()
immer ein seltsames Ergebnis zurückkommt.Versuchen Sie,
document.getElementById('my_input').valueAsNumber
anstelle von$("#my_input").val();
und dannNumber(your_value_retrieved)
zu versuchen, eine Nummer zu erstellen. Wenn der Wert NaN ist, wissen Sie sicher, dass dies keine Zahl ist.Wenn Sie eine Zahl in die Eingabe schreiben, akzeptiert die Eingabe tatsächlich fast jedes Zeichen (ich kann das Euro-Zeichen, einen Dollar und alle anderen Sonderzeichen schreiben). Daher ist es am besten, den Wert mit abzurufen
.valueAsNumber
anstatt jQuery zu verwenden.Übrigens können Ihre Benutzer damit Internationalisierung hinzufügen (dh Kommas anstelle von Punkten unterstützen, um Dezimalzahlen zu erstellen). Lassen Sie das
Number()
Objekt einfach etwas für Sie erstellen und es ist sozusagen dezimalsicher.quelle
valueAsNumber
es auch nicht konsistent mit Browsern funktioniert.Klingt so, als würden Sie toLocaleString () für Ihre numerischen Eingaben verwenden.
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 der Internationalisierung (Zahlenformatierung "num.toLocaleString ()") behandelt, die für Chrome nicht funktioniert
quelle
toLocaleString
ist plattformübergreifend nicht zuverlässig.Anscheinend haben Browser immer noch Probleme (obwohl Chrome und Firefox Nightly gut funktionieren). Ich habe einen hackigen Ansatz für die Leute, die wirklich ein Zahlenfeld verwenden müssen (vielleicht wegen der kleinen Pfeile, die Textfelder nicht haben).
Meine Lösung
Ich
keyup
habe der Formulareingabe einen Ereignishandler hinzugefügt, den Status verfolgt und den Wert festgelegt, sobald er wieder gültig ist.Reines JS-Snippet JSFIDDLE
Code-Snippet anzeigen
Angular 9 Snippet
Code-Snippet anzeigen
quelle