web-dev-qa-db-fra.com

Saisie masquée pour la devise jQuery

Dans mon application Web, j'ai un champ de saisie appelé "Budget" où les utilisateurs saisissent le budget proposé pour un projet. Je dois créer une entrée masquée pour ramener automatiquement le montant entré au format suivant pendant que l'utilisateur tape dans le champ de saisie:

1 000
10 000
100 000

J'ai cherché sur Internet mais ne semble pas trouver celui qui est nécessaire. Quelqu'un pourrait-il m'indiquer un plugin approprié ou peut-être suggérer une solution personnalisée?

Merci d'avance.

jquerymaskedinput
15
cycero

Essayez l'une de ces options:

http://plugins.jquery.com/tag/currency/

Ceux-ci peuvent également contenir ce que vous recherchez:

http://plugins.jquery.com/tag/mask/

15
Phil.Wheeler

J'utilise le code suivant pour archiver le format monétaire sans utiliser de plugins supplémentaires:

$('input.money-bank').on('keydown',function(e){    
    // tab, esc, enter
    if ($.inArray(e.keyCode, [9, 27, 13]) !== -1 ||
        // Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
        // home, end, left, right, down, up
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        return;
    }

    e.preventDefault();

    // backspace & del
    if($.inArray(e.keyCode,[8,46]) !== -1){
        $(this).val('');
        return;
    }

    var a = ["a","b","c","d","e","f","g","h","i","`"];
    var n = ["1","2","3","4","5","6","7","8","9","0"];

    var value = $(this).val();
    var clean = value.replace(/\./g,'').replace(/,/g,'').replace(/^0+/, '');   

    var charCode = String.fromCharCode(e.keyCode);
    var p = $.inArray(charCode,a);

    if(p !== -1)
    {
        value = clean + n[p];

        if(value.length == 2) value = '0' + value;
        if(value.length == 1) value = '00' + value;

        var formatted = '';
        for(var i=0;i<value.length;i++)
        {
            var sep = '';
            if(i == 2) sep = ',';
            if(i > 3 && (i+1) % 3 == 0) sep = '.';
            formatted = value.substring(value.length-1-i,value.length-i) + sep + formatted;
        }

        $(this).val(formatted);
    }    

    return;

});

JSFiddle: https://jsfiddle.net/gt2Ly5rt/6/

Avec ce script, l'utilisateur n'entrera que des nombres, le script placera automatiquement des séparateurs décimaux et des milliers (il est codé en dur au format BRL, mais vous pouvez le personnaliser).

Par exemple, si l'utilisateur tape:

  • "1", il affichera: "0,01"
  • "12", il affichera: "0,12"
  • "123", il affichera: "1,23"
  • "123456", il affichera: "1.234,56"

J'espère que cela aide quelqu'un.

8
Auresco82

Solution simple utilisant uniquement Javascript.

String.prototype.reverse = function () {
        return this.split("").reverse().join("");
    }

    function reformatText(input) {        
        var x = input.value;
        x = x.replace(/,/g, ""); // Strip out all commas
        x = x.reverse();
        x = x.replace(/.../g, function (e) {
            return e + ",";
        }); // Insert new commas
        x = x.reverse();
        x = x.replace(/^,/, ""); // Remove leading comma
        input.value = x;
    }
.currencyinput {
  border-color: #98969a;
    border-style: solid;
    border-width: 0.5px;
    display: inline-block;
}
  

.currencyinput input {   
    border-style: solid solid solid none;
    border-width: 0 0 0 thin;
}
<span class="currencyinput">$<input type="text" onkeyup="reformatText(this)" name="currency"></span>
1
Bugfixer

J'utilise celui-ci ( http://code.google.com/p/jquery-formatcurrency/ ) sur mon site de production et je n'ai eu aucun problème avec celui-ci et l'API est assez simple.

0
Alistair Laing