web-dev-qa-db-fra.com

Dans jQuery, quel est le meilleur moyen de formater un nombre à 2 décimales?

C'est ce que j'ai en ce moment:

$("#number").val(parseFloat($("#number").val()).toFixed(2));

Cela me semble malpropre. Je ne pense pas que je chaîne correctement les fonctions. Dois-je l'appeler pour chaque zone de texte ou puis-je créer une fonction distincte?

javascriptjqueryroundingdecimal-pointnumber-formatting
63
Iain Holder

Si vous faites cela dans plusieurs domaines ou si vous le faites assez souvent, alors un plugin est peut-être la solution.
Voici le début d’un plugin jQuery qui formate la valeur d’un champ à deux décimales.
Il est déclenché par l'événement onchange du champ. Vous voulez peut-être quelque chose de différent.

<script type="text/javascript">

    // mini jQuery plugin that formats to two decimal places
    (function($) {
        $.fn.currencyFormat = function() {
            this.each( function( i ) {
                $(this).change( function( e ){
                    if( isNaN( parseFloat( this.value ) ) ) return;
                    this.value = parseFloat(this.value).toFixed(2);
                });
            });
            return this; //for chaining
        }
    })( jQuery );

    // apply the currencyFormat behaviour to elements with 'currency' as their class
    $( function() {
        $('.currency').currencyFormat();
    });

</script>   
<input type="text" name="one" class="currency"><br>
<input type="text" name="two" class="currency">
99
meouw

Peut-être que quelque chose comme ceci, où vous pouvez sélectionner plus d'un élément si vous le souhaitez?

$("#number").each(function(){
  $(this).val(parseFloat($(this).val()).toFixed(2));
});
62
svinto

Nous modifions une fonction Meouw pour qu'elle soit utilisée avec keyup, car lorsque vous utilisez une entrée, cela peut être plus utile.

Vérifiez ça:

Salut à tous! @Heridev et moi avons créé une petite fonction dans jQuery.

Vous pouvez essayer ensuite:

HTML

<input type="text" name="one" class="two-digits"><br>
<input type="text" name="two" class="two-digits">​

jQuery

// apply the two-digits behaviour to elements with 'two-digits' as their class
$( function() {
    $('.two-digits').keyup(function(){
        if($(this).val().indexOf('.')!=-1){         
            if($(this).val().split(".")[1].length > 2){                
                if( isNaN( parseFloat( this.value ) ) ) return;
                this.value = parseFloat(this.value).toFixed(2);
            }  
         }            
         return this; //for chaining
    });
});

DEMO EN LIGNE:

http://jsfiddle.net/c4Wqn/

(@heridev, @vicmaster)

4
vicmaster