web-dev-qa-db-fra.com

Comment puis-je formater correctement la devise en utilisant jquery?

Je n'ai pas besoin de masque, mais j'ai besoin de quelque chose qui formate la monnaie (dans tous les navigateurs) et ne permette pas la saisie de lettres ou de caractères spéciaux. Merci pour l'aide

Exemple:

Valide: 50,00 $
1 000,53 $

Non valide: 45,00 USD
$ 34.3r6

jquerycurrencyformatter
71
ninjasense

JQUERY FORMATCURRENCY PLUGIN
http://code.google.com/p/jquery-formatcurrency/

48
Robert Harvey

Une autre option (si vous utilisez la vue rasoir ASP.Net) est, Sur votre vue, vous pouvez faire

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

Cela le formaterait correctement. note (élément.total est double/décimal)

si jQuery vous pouvez aussi utiliser Regex

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

En développant la réponse de Melu, vous pouvez le faire pour fonctionnaliser le code et gérer les montants négatifs.

Exemple de sortie:
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();
}
34
Chad Kuehn

En corollaire, pourquoi le plugin jQuery FormatCurrency est une bonne réponse, je voudrais réfuter votre commentaire:

1. Code.google.com/p/jquery-formatcurrency - Ne filtre pas toutes les lettres. Vous pouvez taper une seule lettre et elle ne l'enlèvera pas.

Oui, formatCurrency () en soi ne filtre pas les lettres:

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

Mais toNumber (), inclus dans le plugin formatCurrency, le fait.

Vous voulez donc faire:

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

Utilisez jquery.inputmask 3.x . Voir les démos ici

Fichiers d'inclusion:

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

Et code comme

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

Points forts:

  • facile à utiliser
  • parties optionnelles anywere dans le masque
  • possibilité de définir des alias masquant la complexité
  • masques date/date/heure
  • masques numériques
  • beaucoup de rappels
  • masques non gourmands
  • de nombreuses fonctionnalités peuvent être activées/désactivées/configurées par des options
  • prend en charge les attributs readonly/disabled/dir = "rtl"
  • prise en charge des attributs de masque de saisie de données
  • support multi-masque
  • support de regex-mask
  • support de masque dynamique
  • prise en charge du masque de prétraitement
  • valeur de formatage/validation sans élément d'entrée
15
Fernando Kosh

J'avais l'habitude d'utiliser le plugin de devise au format jquery, mais cela a été très bogué récemment. Je n'ai besoin que d'un formatage USD/CAD, j'ai donc écrit mon propre formatage automatique.

$(".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());
        });

Il suffit de définir la classe de toute entrée qui doit être formatée en devise <input type="text" class="currencyMask" /> et il sera parfaitement formaté dans n’importe quel navigateur.

7
Greg Snider

Essayez les expressions rationnelles avec jQuery (pas de 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">

Edit: Nouveau vérifier une valeur pour valide/invalide

3
KingRider