带有逗号和小数的 Jquery 掩码数答案

【问题标题】：Jquery Mask number with commas and decimal带有逗号和小数的 Jquery 掩码数
【发布时间】：2016-02-15 15:41:16
【问题描述】：

我正在使用 Jquery 掩码插件来格式化我网站上的许多内容，并且我正在尝试弄清楚如何让它以我需要的方式格式化数字。我正在使用以下插件。

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

我正在尝试为我的号码获取以下格式。

999,999,999.99

数字是货币字段，需要每三位加一个逗号，值可以低至0.00

【问题讨论】：

你试过什么？我可以在您链接的页面中看到几个示例，其中一些似乎完全符合您的要求：-？
jsfiddle.net/wjart6xa

标签： jquery jquery-mask

【解决方案1】：

嗯，这行得通。我刚刚调整了网站上的例子，用逗号改变了点，它起作用了。

$('.money').mask("#,##0.00", {reverse: true});

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

<input class="money" type="text"/>

如您所见，数字没有限制。如果你想限制他们，你可以做$('.money').mask('000,000,000,000,000.00', {reverse: true});

【讨论】：

谢谢我在没有 {reverse:true} 的情况下尝试过；一旦我添加它，一切都会很好。
@AdrianoResende，这应该可行。只需确保将{reverse: true} 留在
如何使十进制值可选？
问题是当你有更多的钱投入时......它再次应用面具，有什么解决方案吗？
@guilieen 你将不得不使用另一个选择器。而不是.money，在你真正需要的地方使用一个id作为输入。

【解决方案2】：

在他们的网站上用反引号和点试试这个掩码：

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

拥有

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

【讨论】：

如何添加美元前缀？例如 $5.00
css .money:before { content: '$'; }

【解决方案3】：

我创建了一个没有反向但仍然可以正常工作的蒙版。

想法是在每个 onKeyPress 上动态更改掩码。这是一个解决方案：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>

【讨论】：