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

In Feldern, in denen meine Anwendung Längen- und Breitengradkoordinaten anzeigt, erhalte ich also Informationen wie "51.983", in denen es "51.982559" sein sollte. Meine Problemumgehung besteht darin, input type="text"stattdessen zu verwenden , aber ich möchte die Zahleneingabe mit der korrekten Anzeige von Dezimalstellen verwenden.

Gibt es eine Möglichkeit, Browser zu zwingen, einen Dezimalpunkt in der Zahleneingabe zu verwenden, unabhängig von den clientseitigen lokalen Einstellungen?

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

Danke im Voraus.

UPDATE Ab sofort akzeptiert die Eingabe von Zahlen in Chrome Version 28.0.1500.71 m unter Windows 7 keine mit Komma formatierten Dezimalstellen mehr. Vorgeschlagene Vorschläge mit demstepAttribut scheinen nicht zu funktionieren.

http://jsfiddle.net/AsJsj/

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

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

Sie werden sehen, dass die Ziffern auf Arabisch sind und das Komma als Dezimaltrennzeichen verwendet wird, was bei Arabisch der Fall ist. Dies liegt daran, dass dem BODYTag das Attribut zugewiesen wirdlang="ar-EG" .

Versuchen Sie als nächstes dieses:

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

Dieser wird mit einem Punkt als Dezimaltrennzeichen angezeigt, da die Eingabe in ein DIVbestimmtes Attribut eingeschlossen istlang="en-US" .

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

Mit dem Schritt - Attribute auf die Genauigkeit der Dezimalstellen angegeben Sie wollen, und die lang Attribut [das auf ein Gebietsschema festgelegt ist, das Dezimalstellen mit Punkt formatiert ], akzeptiert Ihre numerische HTML5-Eingabe Dezimalstellen. 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 weiter spezifizieren Attribut max für den maximal zulässigen Wert.

Bearbeiten Fügen Siedem Eingabeelementein lang- Attribut mit einem Gebietsschemawert hinzu, der Dezimalstellen mit Punkt anstelle von Komma formatiert

Entsprechend der Spezifikation können Sie anyals Wert des stepAttributs Folgendes verwenden:

<input type="number" step="any">

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

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

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

Daher empfehle ich, den Fallback zu erwarten und mich auf eine stark programmgesteuert geladene Eingabe [type = text] zu verlassen, um die Aufgabe zu erledigen, 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 nicht einmal Dezimalstellen zu unterstützen (wie BB10)!

Ich weiß nicht, ob dies hilft, aber ich bin hier gestolpert, als ich nach demselben Problem gesucht habe, nur unter dem Gesichtspunkt der Eingabe (dh ich habe festgestellt, dass ich <input type="number" />bei der Eingabe des Werts sowohl ein Komma als auch einen Punkt akzeptiert habe, aber nur letzteres an das Winkelmodell gebunden sein, das ich der Eingabe zugewiesen habe). Also habe ich diese kurze Anweisung notiert:

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

Dann, auf meinem HTML-Code, <input type="number" ng-model="foo" replace-comma />werden Kommas im laufenden Betrieb einfach durch Punkte ersetzt, um zu verhindern, dass Benutzer ungültige (aus JavaScript-Sicht, keine Gebietsschemas!) Zahlen eingeben. Prost.

Ich habe einen Blog-Artikel gefunden, der etwas Ähnliches zu erklären scheint:
HTML5-Eingabetyp = Zahl und Dezimalstellen / Gleitkommazahlen in Chrome

Zusammenfassend:

• das step hilft , die Domäne von gültigen Werten zu definieren
• Der Standardwert stepist1
• Daher ist die Standarddomäne Ganzzahlen (zwischen minund maxeinschließlich, falls angegeben).

Ich würde annehmen, dass dies mit der Mehrdeutigkeit der Verwendung eines Kommas als Tausendertrennzeichen gegenüber einem Komma als Dezimalpunkt in Konflikt steht 51,983 sind tatsächlich ein seltsam analysiertes Einundfünfzigtausend, neunhundertdreiundachtzig.

Anscheinend können Sie step="any"die Domain auf alle rationalen Zahlen im Bereich erweitern, aber ich habe es selbst nicht versucht. Für Breiten- und Längengrade 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.

Soweit ich es verstehe, gibt der HTML5 input type="numberimmer input.valueals zurück string.

Gibt anscheinend input.valueAsNumberden aktuellen Wert als Gleitkommazahl zurück. Sie können dies verwenden, um einen gewünschten Wert zurückzugeben.

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

Haben Sie darüber nachgedacht, Javascript dafür zu verwenden?

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

Eine Option ist javascript parseFloat()... niemals ein " text chain" --> 12.3456mit Punkt auf ein int analysieren ... 123456(int den Punkt entfernen) eine Textkette auf ein FLOAT analysieren ...

Um diese Koordinaten an einen Server zu senden, senden Sie eine Textkette. HTTPsendet nurTEXT

Vermeiden Sie im Client das Parsen der Eingabekoordinaten mit " int" und arbeiten Sie mit Textzeichenfolgen

Wenn Sie die Kabel in HTML mit PHP oder ähnlichem drucken ... schweben Sie zu Text und drucken Sie in HTML

Verwenden Sie das Muster

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

Viel Glück

HTML-Schritt Attribut

<input type="number" name="points" step="3">

Beispiel: Wenn step = "3" ist, können die zulässigen Zahlen -3, 0, 3, 6 usw. sein.

Tipp: Das Schrittattribut kann zusammen mit den Attributen max und min verwendet werden, um einen Bereich von zulässigen Werten zu erstellen.

Hinweis: Das Schrittattribut funktioniert mit den folgenden Eingabetypen: Nummer, Bereich, Datum, Datum / Uhrzeit, Datum / Uhrzeit-Lokal, Monat, Uhrzeit und Woche.

Ich habe dazu einen benutzerdefinierten Code geschrieben

Wenn Sie ersetzen möchten ,mit ., entfernen translate_decimals Funktionen vollständig.

var input = document.querySelector('input[role="custom-number"]');
var bincr = document.querySelector('button[role="increment"]');
var bdecr = document.querySelector('button[role="decrement"]');

function translate_decimals(side = 0)
{
	input.value = (side == ',' ? input.value.replace('.',',') : input.value.replace(',','.'));
}
translate_decimals(',');

bincr.addEventListener('click', ()=>{
	if (input.hasAttribute('max'))
	{
		if (input.value.substr(0,input.getAttribute('max').length) == input.getAttribute('max').substr(0,input.getAttribute('max').length))
		{
			return;
		}
		else
		{
			translate_decimals('.');
			let temp = input.value;
			input.value = "";
			input.value = (input.hasAttribute('step') ? (parseFloat(temp) + parseFloat(input.getAttribute('step'))) : temp++);
			translate_decimals(',');
		}
	}
});

bdecr.addEventListener('click', ()=>{
	if (input.hasAttribute('min'))
	{
		if (input.value.substr(0,input.getAttribute('min').length) == input.getAttribute('min').substr(0,input.getAttribute('min').length))
		{
			return;
		}
		else
		{
			translate_decimals('.');
			input.value = (input.hasAttribute('step') ? (input.value - input.getAttribute('step')) : input.value--);
			translate_decimals(',');
		}
	}
});

/* styling increment & decrement buttons */
button[role="increment"],
button[role="decrement"] {
	width:32px;
}

<input type="text" role="custom-number" step="0.01" min="0" max="0" lang="en" value="1.99">
<button role="increment">+</button>
<button role="decrement">-</button>

Ich musste sicherstellen, dass Werte immer noch mit einem Komma anstelle eines Punktes als Dezimaltrennzeichen eingegeben werden können. Dies scheint ein uraltes Problem zu sein. Hintergrundinformationen finden Sie unter folgenden Links:

• https://www.slightfuture.com/webdev/html5-input-number-localization.html
• https://codepen.io/aminimalanimal/full/bdOzRG

Ich habe es endlich mit ein bisschen jQuery gelöst. Ersetzen der Kommas durch Punkte onChange. Dies scheint in den neuesten Versionen von Firefox, Chrome und Safari bisher gut zu funktionieren.

$('input[type=number]').each(function () {

  $(this).change(function () {

    var $replace = $(this).val().toString().replace(/,/g, '.');

    $(this).val($replace);

  })

});

1) 51.983 ist eine Zeichenfolgentypnummer, die kein Komma akzeptiert

Also solltest du es 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 Nummer

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

Schauen Sie sich http://jsfiddle.net/ydf3kxgu/ an.

Hoffe das löst dein Problem