En jQuery, quelle est la meilleure façon de formatage d'un nombre à 2 décimales?

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

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

Il semble bordélique pour moi. Je ne pense pas que je suis enchaînant les fonctions correctement. Dois-je appeler pour chaque zone de texte, ou puis-je créer une fonction distincte?

InformationsquelleAutor Iain Holder | 2009-01-25
  1. 99

    Si vous êtes en train de faire ce pour plusieurs champs, ou de le faire assez souvent, alors peut-être un plugin est la réponse.

    Voici les débuts d'un plugin jQuery qui formate la valeur d'un champ à deux décimales.

    Elle est déclenchée par l'événement onchange du champ. Vous souhaitez 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">
    • Salut, je voudrais savoir que faire nous avons besoin d'un autre plugin pour currencyFormat()?..
    • Cela fonctionne sous IE? J'ai eu ce travail en chrome et FF, mais pas IE...
    InformationsquelleAutor meouw
  2. 62

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

    $("#number").each(function(){
  $(this).val(parseFloat($(this).val()).toFixed(2));
});
    • Sur une note de côté, vous ne devriez pas avoir de doublons d'id dans votre dom. Envisager de changer de "numéro" à une classe.
    • rien n'implique qu'il y a plus d'un élément avec id = "nombre". Il ressemble à svinto est juste en utilisant le "chaque" fonction comme un moyen de réduire le nombre de fois que la magie de la chaîne "numéro #" apparaît dans le code. C'est un petit (et bon, je pense) l'amélioration sur LainMH du code. Si cette mise en forme ne doit être réalisée que sur une page, puis c'est la façon dont je préfère le faire. Si elle doit être dupliqué sur plus d'une page, alors je préfère meouw du plugin approche - à l'exception extrait d'un fichier javascript externe.
    • assumer ce que gradbot essayais de dire c'est que si vous voulez appliquer la même fonction sur plusieurs zone de saisie sur une seule page, puis trop vous ne pouvez pas leur donner le même id ou vous ne pouvez pas garder de mentionner sur chaque zone de saisie de l'id comme ceci ('#num1,#num2').each(function(){}); .Donc, il serait préférable d'utiliser la classe telle approche ('.number').each(function(){});.Et de fournir à chaque zone de saisie avec une classe commune -nombre
    InformationsquelleAutor svinto
  3. 4

    Nous modifions un Meouw fonction pour être utilisé avec keyup, parce que lorsque vous utilisez une entrée, il peut être plus utile.

    Vérifier:

    Hé là!, @heridev et j'ai créé une petite fonction en jQuery.

    Vous pouvez essayer la prochaine:

    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
    });
});

    DÉMO EN LIGNE:

    http://jsfiddle.net/c4Wqn/

    (@heridev, @vicmaster)

    InformationsquelleAutor vicmaster