Wie kann ich die Währung mit jquery richtig formatieren?


77

Ich brauche keine Maske, aber ich brauche etwas, das die Währung (in allen Browsern) formatiert und die Eingabe von Buchstaben oder Sonderzeichen nicht zulässt. Danke für die Hilfe

Beispiel:

Gültig:
$ 50.00 $ 1,000.53

Nicht gültig: $ w45.00
$ 34.3r6


Können Sie erklären, warum die anderen nicht Ihren Standards entsprachen?
Jeff

37
StackOverflow ist meine Suchmaschine für Fragen wie diese. Das Community-Feedback hier ermöglicht ein viel schnelleres und genaueres Bild davon, welche Tools und Praktiken geschätzt werden. Ich sage, lassen Sie diese Art von Fragen kommen.
Feckmore

13
Ich bin von Google hierher gekommen.
-Nick-Wilson

3
Diese Frage ist das Top-Google-Suchergebnis für "Währung im jquery-Format"
Paul L

Antworten:



99

Eine weitere Option (wenn Sie die ASP.Net-Rasiereransicht verwenden) ist: In Ihrer Ansicht können Sie dies tun

<div>@String.Format("{0:C}", Model.total)</div>

Dies würde es richtig formatieren. note (item.total ist doppelt / dezimal)

In jQuery können Sie auch Regex verwenden

$(".totalSum").text('$' + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());

4
Ich habe dies nicht abgelehnt, aber ich kann es @String.Formatin keiner HTML- oder jQuery-Referenz finden. Ich vermute, es hat etwas mit serverseitigem HTML zu tun, das von ASP.NET generiert wurde. Hat sich die ursprüngliche Frage darauf bezogen?
Nate

5
Für alle, die sich in Zukunft fragen, ist @ String.Format die Rasiermaschine für ASP.NET || MVC
Kyle

2
Ich mag den regulären Ausdruck. Warum .toString () am Ende? .replace gibt eine Zeichenfolge zurück.
xr280xr

3
Ich habe dies auch nicht abgelehnt, aber es verdient es, eine MVC Razor-Lösung für eine Frage zu geben, in der Razor, MVC oder sogar ASP.NET nicht erwähnt wurden, und in der Antwort wurde nicht einmal angegeben, dass es sich hier um eine Lösung für MVC handelt Rasierer.
Jonathan Wood

1
Dies ist eine gute Antwort, aber wie muss ich den regulären Ausdruck ändern, um eine Zahl ohne Dezimalstellen und ohne das Dollarsymbol zu erhalten? zB möchte ich, dass 16000000 als 16.000.000 angezeigt wird
ministe2003

37

Wenn Sie Melus Antwort erweitern, können Sie dies tun, um den Code zu funktionalisieren und negative Beträge zu verarbeiten.

Beispielausgabe:
$ 5,23
- $ 5,23

function formatCurrency(total) {
    var neg = false;
    if(total < 0) {
        neg = true;
        total = Math.abs(total);
    }
    return (neg ? "-$" : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
}

20

Als Folge dessen, warum das jQuery FormatCurrency-Plugin eine gute Antwort ist, möchte ich Ihren Kommentar widerlegen:

1. code.google.com/p/jquery-formatcurrency - Filtert nicht alle Buchstaben heraus. Sie können einen einzelnen Buchstaben eingeben, der ihn jedoch nicht entfernt.

Ja, formatCurrency () filtert selbst keine Buchstaben heraus:

// only formats currency
$(selector).formatCurrency();

ToNumber (), das im formatCurrency-Plugin enthalten ist, tut dies jedoch.

Sie möchten also Folgendes tun:

// removes invalid characters, then formats currency
$(selector).toNumber().formatCurrency();

15

Verwenden jquery.inputmask 3.x . Sehen Sie hier Demos

Dateien einschließen:

<script src="/assets/jquery.inputmask.js" type="text/javascript"></script>
<script src="/assets/jquery.inputmask.extensions.js" type="text/javascript"></script>
<script src="/assets/jquery.inputmask.numeric.extensions.js" type="text/javascript"></script>

Und Code als

$(selector).inputmask('decimal',
  { 'alias': 'numeric',
    'groupSeparator': '.',
    'autoGroup': true,
    'digits': 2,
    'radixPoint': ",",
    'digitsOptional': false,
    'allowMinus': false,
    'prefix': '$ ',
    'placeholder': '0'
  }
);

Highlights:

  • Einfach zu verwenden
  • optionale Teile befanden sich in der Maske
  • Möglichkeit, Aliase zu definieren, die die Komplexität verbergen
  • Datums- / Datums- / Uhrzeitmasken
  • numerische Masken
  • viele Rückrufe
  • nicht gierige Masken
  • Viele Funktionen können durch Optionen aktiviert / deaktiviert / konfiguriert werden
  • unterstützt schreibgeschützte / disabled / dir = "rtl" -Attribute
  • Unterstützung von Dateneingabemaskenattributen.
  • Unterstützung für mehrere Masken
  • Unterstützung für Regex-Masken
  • Unterstützung für dynamische Masken
  • Unterstützung der Vorverarbeitungsmaske
  • Wertformatierung / Validierung ohne Eingabeelement

Nach dem Herunterladen der ZIP-Datei (aus dem Internet) stellte ich fest, dass die * .js-Datei in der ZIP-Datei eine andere Dateinamenskonvention hat. Ich bin ein bisschen verwirrt ...
Gumuruh

@gumuruh In dist / Ordner der ZIP-Datei schauen. Die ZIPs im Stammverzeichnis des extrahierten Ordners sind vom Paket und können nicht verwendet werden. Aufmerksamkeit auf die Erweiterungen. Laden Sie nur das, was Sie brauchen sollten.
Fernando Kosh

@FernandoKosh @ draw010 Ist es möglich, dies für mehrere Elemente auf einer Seite zu verwenden? Mit zum Beispiel: $('.price-format').inputmaks() oder $('.price-format').each(function() { $(this).inputmask() })
remkovdm

1
@remkovdm Es ist schon eine Weile her, seit ich es jetzt implementiert habe, aber ja, ich glaube, das war in Ordnung. Die Dokumente und Beispiele zeigen $ (Selektor), was bedeutet, dass es sich wie jeder andere jQuery-Selektor um einen CSS-Selektor handeln kann. So $('.price-format').inputmask('decimal', { ... }); sollte funktionieren.
zog010

9

Früher habe ich das Währungs-Plugin im JQuery-Format verwendet, aber es war in letzter Zeit sehr fehlerhaft. Ich brauche nur die Formatierung für USD / CAD, also habe ich meine eigene automatische Formatierung geschrieben.

$(".currencyMask").change(function () {
            if (!$.isNumeric($(this).val()))
                $(this).val('0').trigger('change');

            $(this).val(parseFloat($(this).val(), 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
        });

Legen Sie einfach die Klasse der Eingaben fest, die als Währung formatiert werden sollen, und formatieren <input type="text" class="currencyMask" />Sie sie in jedem Browser perfekt.


4

Versuchen Sie es mit der regexp-Währung mit jQuery (kein Plugin) :

$(document).ready(function(){
  $('#test').click(function() {
    TESTCURRENCY = $('#value').val().toString().match(/(?=[\s\d])(?:\s\.|\d+(?:[.]\d+)*)/gmi);
    if (TESTCURRENCY.length <= 1) {
      $('#valueshow').val(
        parseFloat(TESTCURRENCY.toString().match(/^\d+(?:\.\d{0,2})?/))
      );
    } else {
      $('#valueshow').val('Invalid a value!');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" value="12345.67890" id="value">
<input type="button" id="test" value="CLICK">
<input type="text" value="" id="valueshow">

Bearbeiten: Neu Überprüfen Sie einen Wert auf gültig / ungültig


Was ist das Problem, um abzustimmen? Diese Frage (Bitte lesen Sie meta.stackoverflow.com/questions/251758/… ist danke)
KingRider
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.