web-dev-qa-db-fra.com

Numéro de masque Jquery avec des virgules et des décimales

J'utilise un plugin de masque Jquery pour formater de nombreuses choses sur mon site et j'essaie de comprendre comment l'obtenir pour formater des nombres de la manière dont j'ai besoin. J'utilise le plugin suivant.

https://igorescobar.github.io/jQuery-Mask-Plugin/

J'essaie d'obtenir le format suivant pour mes numéros.

999,999,999.99

Le nombre est un champ monétaire qui nécessite une virgule ajoutée tous les trois chiffres et la valeur peut être aussi basse que 0.00

jqueryjquery-mask
7
James

Essayez ce masque sur leur site Web avec des virgules et des points inverses:

$('.money').mask('000.000.000.000.000,00', {reverse: true});

avoir

$('.money').mask('000,000,000,000,000.00', {reverse: true});
1
ADreNaLiNe-DJ

J'ai créé un masque qui est sans inversion mais fonctionne toujours bien.

L’idée est de changer de masque à la volée sur chaque onKeyPress . Voici une solution: https://codepen.io/anon/pen/wNvvWw

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>

<input type="text" class="input-float" placeholder="00.00" value="" />

<script>
    var curCharLenght = 0;
    var floatOptions = {
      onKeyPress: function(cur, e, currentField, floatOptions) {
        var mask = createMask(cur);
        var field = currentField
          .parent()
          .find(".input-float[data-field=" + currentField.attr("data-field") + "]");
        if (cur.length - curCharLenght < 0 && cur.indexOf(".") == -1) {
          field.mask(mask + " 000", floatOptions);
          curCharLenght = cur.length;
        } else if (event.data == "," || event.data == ".") {
          curCharLenght = mask.length + 1;
          mask += ".0000";
          field.mask(mask, floatOptions);
        } else {
          if (cur.indexOf(".") == -1) {
            mask = mask + " 000.0000";
            field.mask(mask, floatOptions);
            if (isNaN(e.originalEvent.data) || e.originalEvent.data == " ") {
              field.val(field.val().slice(0, -1));
            }
          }
          curCharLenght = cur.length;
        }
      }
    };

    function createMask(val) {
      var mask = "";
      var num = val.split(".")[0];
      num = num.replace(/ /g, "");
      for (var i = 1; i <= num.length; i++) {
        mask += "0";
        if ((num.length - i) % 3 === 0 && i != num.length) {
          mask += " ";
        }
      }
      return mask;
    }

    $(".input-float").each(function(index, el) {
      var item = $(this);
      item.attr("data-field", "field-" + index);

      var mask = createMask(item.val());
      if (item.val().indexOf(".") !== -1) {
        var splitedVal = item.val().split(".");
        if (splitedVal.length > 1 && splitedVal[1].length > 2) {
          if (splitedVal[1].length == 3) {
            mask += ".000";
          } else {
            mask += ".0000";
          }
        } else {
          mask += ".00";
        }
      }

      item.mask(mask, floatOptions);
    });
</script>
0
Aram Sahradyan