wake-up-neo.com

Dezimalpunkt anstelle von Komma in HTML5-Zahleneingabe erzwingen (clientseitig)

Ich habe gesehen, dass einige Browser die input type="number"-Notation von Zahlen lokalisieren. 

In Bereichen, in denen in meiner Anwendung Längen- und Breitengradkoordinaten angezeigt werden, bekomme ich beispielsweise "51,983", wo es "51,982559" sein sollte. Meine Problemumgehung ist die Verwendung von input type="text", aber ich möchte die Zahleneingabe mit korrekter Anzeige der Dezimalzahlen verwenden.

Gibt es eine Möglichkeit für force Browser, einen Dezimalpunkt in der Zahleneingabe zu verwenden, unabhängig von den lokalen Einstellungen des Clients?

(Es versteht sich von selbst, dass ich dies in meiner Anwendung sowieso auf der Serverseite korrigiere, aber in meinem Setup muss es auch auf der Clientseite korrekt sein (aufgrund von JavaScript)).

Danke im Voraus.

UPDATE Beim Abrufen von Chrome Version 28.0.1500.71m unter Windows 7 akzeptiert die Zahleneingabe momentan keine mit Komma formatierten Dezimalstellen. Vorgeschlagene Vorschläge mit dem stepattribute scheinen nicht zu funktionieren.

http://jsfiddle.net/AsJsj/

59
chocolata

Wenn das Attributstepauf die Genauigkeit der gewünschten Dezimalstellen festgelegt ist, akzeptiert die numerische Eingabe von html5 Dezimalzahlen. z.B. Werte wie 10.56 annehmen; Ich meine 2 Dezimalstellen, mach das:

<input type="number" step="0.01" min="0" lang="en" value="1.99">

Sie können das Attributmaxfür den maximal zulässigen Wert angeben.

Edit Fügen Sie dem Eingabeelement einlang- Attribut mit einem Gebietsschemawert hinzu, der Dezimalstellen mit Punkt anstelle von Komma formatiert

18
Peter

Derzeit berücksichtigt Firefox die Sprache des HTML-Elements, in dem sich die Eingabe befindet. Versuchen Sie beispielsweise diese Geige in Firefox:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

Sie werden sehen, dass die Zahlen arabisch sind und das Komma als Dezimaltrennzeichen verwendet wird, wie es bei Arabisch der Fall ist. Dies liegt daran, dass das Tag BODY das Attribut lang="ar-EG" erhält.

Versuchen Sie es als nächstes:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

Diese wird mit einem Punkt als Dezimaltrennzeichen angezeigt, da die Eingabe in eine DIV eingeschlossen wird, die das Attribut lang="en-US" enthält.

Eine Lösung, auf die Sie zurückgreifen können, besteht darin, Ihre numerischen Eingaben mit einem Containerelement zu umschließen, das so eingestellt ist, dass eine Kultur verwendet wird, die Punkte als Dezimaltrennzeichen verwendet.

16
Ashraf Sabry

Entsprechend dem spec können Sie any als Wert des step-Attributs verwenden:

<input type="number" step="any">
7
Halil Özgür

Leider ist die Reichweite dieses Eingabefeldes in den modernen Browsern sehr gering:

http://caniuse.com/#feat=input-number

Daher empfehle ich, den Fallback zu erwarten und sich auf eine schwer programmierte Eingabe [type = text] zu verlassen, um den Job auszuführen, bis das Feld allgemein akzeptiert wird. 

Bisher haben nur Chrome, Safari und Opera eine ordentliche Implementierung, aber alle anderen Browser sind fehlerhaft. Einige von ihnen scheinen keine Dezimalzahlen zu unterstützen (wie BB10)!

2
opalenzuela

1) 51.983 ist eine Zeichenfolgentypnummer, die kein Komma akzeptiert 

sie sollten es also als Text festlegen

<input type="text" name="commanumber" id="commanumber" value="1,99" step='0.01' min='0' />

ersetzen mit .

und ändern Sie das Typattribut in number

$(document).ready(function() {
    var s = $('#commanumber').val().replace(/\,/g, '.');   
    $('#commanumber').attr('type','number');   
    $('#commanumber').val(s);   
});

Check out http://jsfiddle.net/ydf3kxgu/

Hoffe, das löst dein Problem 

1
Selvin

Ich habe einen Blogartikel gefunden, der etwas zu erklären scheint: http://blog.isotoma.com/2012/03/html5-input-typennummer-and-decimalsfloats-in-chrome/

In Summe:

  • step hilft bei der Definition der Domäne der gültigen Werte
  • der Standardwert step ist 1
  • daher ist die Standarddomäne ganze Zahlen (zwischen min und max, falls angegeben)

Ich würde davon ausgehen, dass dies mit der Mehrdeutigkeit der Verwendung eines Kommas als Tausendertrennzeichen im Vergleich zu einem Komma als Dezimalpunkt zusammenfällt, und Ihr 51,983 ist tatsächlich ein merkwürdig geparstes einundfünfzig, eintausend, neunhundert und acht drei.

Anscheinend können Sie step="any" verwenden, um die Domäne auf alle rationalen Zahlen im Bereich zu erweitern, jedoch habe ich es selbst nicht versucht. Für Längen- und Breitengrad habe ich erfolgreich verwendet:

<input name="lat" type="number" min="-90.000000" max="90.000000" step="0.000001">
<input name="lon" type="number" min="-180.000000" max="180.000000" step="0.000001">

Es ist vielleicht nicht schön, aber es funktioniert.

Edit: Der aktualisierte Link lautet https://www.isotoma.com/blog/2012/03/02/html5-input-typenumber-and-decimalsfloats-in-chrome/

1
Matty K

Ich weiß nicht, ob dies hilft, aber ich stolperte hier, als ich nach demselben Problem suchte, nur aus einer EingabeSicht (dh ich habe festgestellt, dass mein <input type="number" /> beim Eingeben des Wertes ein Komma und einen Punkt akzeptierte.) aber nur das letztere war an das anglejs-Modell gebunden, das ich der Eingabe zugewiesen hatte, so dass ich es gelöst habe:

.directive("replaceComma", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.on("keydown", function(e) {
                if(e.keyCode === 188) {
                    this.value += ".";
                    e.preventDefault();
                }
            });
        }
    };
});

Dann, in meiner HTML-Datei, einfach: <input type="number" ng-model="foo" replace-comma /> ersetzt Kommas schnell durch Punkte, um Benutzer daran zu hindern, ungültige (aus einem Javascript-Standpunkt, nicht lokalisierte) Zahlen einzugeben. Prost.

1
Andrea Aloi

Verwenden Sie lang attribut für die Eingabe. Gebietsschema in meiner Web-App fr_FR, lang = "en_EN" in der Eingabezahl und ich kann ein Komma oder einen Punkt gleichgültig verwenden. Firefox zeigt immer einen Punkt an, Chrome ein Komma. Aber beide separtor sind gültig.

0
zian974

Haben Sie darüber nachgedacht, Javascript zu verwenden?

$('input').val($('input').val().replace(',', '.'));

0
mhrvatin

eine Option ist javascript parseFloat()... parse niemals einen "text chain" --> 12.3456 mit Punkt auf einen int ... 123456 (int entferne den Punkt) eine Textkette in ein FLOAT ...

um diese Koordinaten an einen Server zu senden, senden Sie eine Textkette. HTTP sendet nur TEXT

im Client sollten Sie die Eingabekoordinaten nicht mit "int" analysieren und mit Textzeichenfolgen arbeiten

wenn Sie die Kabel in der HTML-Datei mit PHP oder ähnlichem drucken, schweben Sie in Text und drucken Sie in HTML

0
Llanis

Soweit ich es verstehe, gibt der HTML5 input type="number immer input.value als string zurück. 

Anscheinend gibt input.valueAsNumber den aktuellen Wert als Fließkommazahl zurück. Sie können dies verwenden, um einen gewünschten Wert zurückzugeben. 

Siehe http://diveintohtml5.info/forms.html#type-number

0
Jason Gennaro