Hilfe Javascript / React Feldformatierung

ist gelöst, danke Maidzen für deine Hilfe!

Ich Arbeite selber nur mit Vue aber normalerweise ist sowas auf der onkeyup funktion weil keydown vor der Eingabe passiert und keyup nach der Eingabe.

Dein Input hat evtl. den type=„number“?
Das ist für Formatierte Nummern nicht möglich (weil die nur ein Format zulassen), in dem fall einfach auf type=„text“ ändern und im Keydown event unerwünschte eingaben blockieren.

Wenn du den teil deines Codes postest wäre es deutlich einfacher das Problem zu identifizieren

Ich sehe du hast TypeScript (an dem ts-ignore) ist dein State evtl. kein String und du versuchst eine als string formatierte nummer darin zu speichern?

ich kenne LSG leider nicht.

Triggert mich schon irgendwie.

Warum lässt man den Beitrag nicht einfach stehen?

Sorry, ist leider beruflich gewesen. Möchte ungern, dass einer den Code googlen kann.
Obwohl es nichts komplexes war.

Ich habe leider noch ein weiteres Problem.
Die Formatierung klappt nur ist es ja so, dass Zahlen 140.21 sind etc.
Und wir nutzen 140,21 also ein Komma für die Dezimalzahlen.

Ich nutze Intl.NumberFormat dieser gibt mir leider den Fehler zurück, dass wenn der User 140,21 schreib es keien Nummer ist also NaN logischwerweise klappt es bei 140.21 und er formatiert es auch in 140,21.

Ich hab schon etwas länger nachgeschaut aber nichts konkretes gefunden.
Mir wurde number format to parts vorgeschlagen. Aber da denk ich mir wenn der Nutzer nur 140 eingibt klappt es doch nicht oder? Also damit meine ich User könnte 140 oder 140,00 eingeben.

Code sieht so aus:
const formatter = new Intl.NumberFormat(„de-DE“, {
style: „decimal“,
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});

    onBlur={value => {
      setInputamount(formatter.format(+inputamount));

Also geht es darum, dass NumberFormat Komma statt ein Punkt für Dezimalzahlen akzeptiert.

Tut mir Leid, falls du Interesse hast kann ich gern per PN das Problem schildern, welches ich hatte.

So würde ich das lösen. einfach mit string.replace das komma durch einen Punkt ersetzen, dann eine Number draus machen und das Format drüber rennen lassen

vielen vielen Dank für deine Antwort, der Link funktioniert leider nicht?
es wird nur der standard hello world text angezeigt. Ich nehme an hinter inputamount einfach .replace(","".")?

an replace hatte ich auch gedacht aber hatte bedenken bei den tausender punkten dass das auch replaced wird aber wenn wir erst replacen und dann formatieren sollte es passen danke :)

const numberString = '123,45789';
const number = Number(numberString.replace(',', '.'));
console.log(number);

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' 
}).format(number));

[LOG]: 123.45789 
[LOG]: "123,46 €"
1 Like

Hier als JSFiddle
https://jsfiddle.net/1sh0ur3b/10/

1 Like

funktioniert alles nur wenn ich eine Eingabe mit mehr als 3 Zahlen vor den Dezimalzahlen eingebe wird ein . gesetzt für die Tausender und durch onlbur wird dann auch das Punkt in ein Komma umgewandelt.
Es gibt doch ein Befehl nur die letzten 3 Zahlen zu formatieren oder so mit Regex oder?
Das würde das Problem lösen
Ansonsten wüsste ich nich auf welche on Funktion ich das replacen legen sollte. Habe onclick onfocus oniconclick onkeydown.
Bei fast allen bekomm ich nach der ersten Zahl ich eingebe einen Error

replace(/,$/,".") und
.replace(/.$/,".") funktioniert leider nicht

nochmal edit: wenn ich usegrouping ausschalte funktioniert es( also wenn die tausender punkte nicht dabei sind)

Lösung: function rep(str: string) {
return str
//@ts-ignore
.replaceAll(".", „,“)
.replace(/,([0-9]{1,2})$/, „.$1“)
.replaceAll(",", „“)
}