Bei der Eingabe der HTML5-Zahl (clientseitig) anstelle von Komma einen Dezimalpunkt erzwingen.


83

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/


Haben Sie schon eine Lösung gefunden? Ich habe fast das gleiche Problem unter Chrome 11 unter Windows.
Kostas

Noch keine Lösung. Die beste Vermutung ist, dies zu vermeiden (und den Eingabetyp = "Text" zu verwenden), bis dies behoben ist ...
Chocolata

3
Sieht so aus, als ob es von den Gebietsschemas Ihres Browsers abhängt. In meinem Chrom sehe ich Komma, im Chrom meines Partners sehe ich einen Punkt.
Fguillen


1
Wie ich kürzlich auch herausgefunden habe, verwenden einige Länder Komma anstelle eines Dezimalpunkts.
jbutler483

Antworten:


26

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.


3
Interessant! Leider scheint es nur in Firefox zu funktionieren, nicht in Chrome (47.0.2526.106)
luis.ap.uyen

Auch nicht in Firefox, in Frankreich
Aubin

6
Firefox respektiert die Spracheinstellung der Seite. Chrome legt das Dezimaltrennzeichen des Betriebssystems oder des Browsers fest? Edge legt den Dezimalpunkt fest, unabhängig von den Spracheinstellungen der Seite, des Browsers oder des Betriebssystems. Was für ein Chaos.
Bbsimonbb

1
Sie benötigen das Wrapper-Element nicht. Sie können das langAttribut direkt auf dem Eingabeelement festlegen .
Jenny O'Reilly

2
Das langAttribut hat tatsächlich den Unterschied für mich gemacht, danke!
Spaark

21

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


26
Dies funktioniert immer noch nicht :-( Clientseitige lokale Werte transformieren den Dezimalpunkt immer in ein Dezimalkomma, unabhängig von Schritt oder Wertattribut .:-(
Chocolata

12
Soweit ich weiß, geht es bei der Frage nicht um ein Dezimaltrennzeichen. Die Frage ist nach '.' anstelle von ',', wenn das Gebietsschema des Clients ',' bevorzugt.
Emanuele Paolini

Unabhängig davon, welches Dezimaltrennzeichen Sie im Schrittattribut verwenden, wird es vom Browser weiterhin lokalisiert. Das heißt, mit Ihrem Beispiel - in den meisten europäischen Ländern würde die angezeigte Zahl 10,56 sein
khartvin

Ich kam zurück und las die Frage 5 Jahre später noch einmal und fragte mich, warum ich die obige Antwort gegeben hatte. Siehe die Bearbeitung, bitte
Peter

Es funktioniert auch nicht, wenn die Daten mit Ajax gespeichert werden.
Somsgod


5

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.


4

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)!


Die Verwendung einer Bibliothek wie number.js kann bei den inhärenten Problemen helfen, mehrere Sprachen auf diesem Planeten zu haben.
Pintxo

3

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.


Hallo Andrea, gibt es eine Möglichkeit, dies ohne Angular JS zu tun? Mit jQuery zum Beispiel?
Chocolata

5
Sicher, ich nehme an, Sie könnten auf der Basis von Zahleneingaben so etwas schreiben $("input[type=number]").on("keydown", function(e) { if(e.keyCode === 188) { this.value += "."; e.preventDefault(); }});(sobald Ihre Seite zusammen mit allen Zahleneingaben vollständig geladen ist)
Andrea Aloi

2
Dieses Snippet funktioniert nicht auf Chrome (getestet mit v60). Beim Eingeben 888,der valueEigenschaft wird beim Eingeben der Warnung eine Warnung 888.ausgegeben, die besagt, dass es sich nicht um eine gültige Zahl handelt (für den regulären Ausdruck ist mindestens eine Zahl nach dem Punkt erforderlich), und das Feld wird leer. Das Eingeben eines Punktes funktioniert jedoch wahrscheinlich, weil die Eingabe ihren Wert als "in Bearbeitung" betrachtet und darauf wartet, dass weitere Ziffern eingegeben werden
svvac

3

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.


In diesem Fall ist es gut, dass ich eine Zusammenfassung geschrieben und dann extrapoliert habe, oder?
Matty K


0

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

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


Bei Chrom mit Eingabe funktioniert [Typ = Nummer] nicht. Komma wird immer angezeigt.
Zurück

0

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


0

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


1
Hallo, habe es gerade in Chrome 62.0.3202.94 unter Windows 10 getestet. Es funktioniert nicht. Bei Verwendung der Drehknöpfe wird die Eingabe auf Komma anstatt auf Punkt zurückgesetzt (unter Berücksichtigung der belgischen Gebietsschemaeinstellungen). Trotzdem danke.
Chocolata

0

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.


0

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>


0

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:

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

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.