Номер маски Jquery с запятыми и десятичным числом

Я использую плагин маски Jquery для форматирования многих вещей на моем сайте, и я пытаюсь понять, как заставить его форматировать числа так, как мне нужно. Я использую следующий плагин.

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

Я пытаюсь получить следующий формат для своих чисел.

999,999,999.99

Число — это поле валюты, в котором через каждые три цифры нужно добавлять запятую, а значение может быть не ниже 0.00.


jquery jquery-mask
person James    schedule 15.02.2016    source источник
comment
Что вы пробовали? Я вижу несколько примеров на странице, на которую вы ссылаетесь, и некоторые из них, похоже, делают именно то, о чем вы просите :-?   -  person Álvaro González    schedule 15.02.2016
comment
jsfiddle.net/wjart6xa   -  person Phiter    schedule 15.02.2016

Ответы (3)


arrow_upward
28
arrow_downward

Что ж, это сработало. Я просто подправил пример с веб-сайта, заменив точки запятыми, и это сработало.

$('.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});

person Phiter    schedule 15.02.2016
comment
Спасибо, я пробовал без {reverse:true}; Как только я добавил его, все работает отлично. - person James; 15.02.2016
comment
@AdrianoResende, это должно сработать. Просто не забудьте оставить {reverse: true} включенным - person Phiter; 28.11.2016
comment
Как сделать десятичное значение необязательным? - person Wildan Muhlis; 23.01.2020
comment
проблема в том, что когда у вас есть больше входов для денег .. снова применяется маска, какое-нибудь решение? - person guilieen; 30.11.2020
comment
@guilieen, тогда вам придется использовать другой селектор. Вместо .money используйте идентификатор для ввода, где вам это действительно нужно. - person Phiter; 01.12.2020
comment
Чем этот шаблон #,##0 отличается от этого #,## ?? @Phiter - person Ray Coder; 30.01.2021

arrow_upward
4
arrow_downward

Попробуйте эту маску с их сайта с кавычками и точками:

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

иметь

$('.money').mask('000,000,000,000,000.00', {reverse: true});
person ADreNaLiNe-DJ    schedule 15.02.2016
comment
как добавить префикс доллара? например $5.00 - person Renan Coelho; 11.06.2019
comment
css .money:before { содержимое: '$'; } - person php-b-grader; 16.12.2020

arrow_upward
0
arrow_downward

Я создал маску без реверса, но все еще отлично работает.

Идея состоит в том, чтобы менять маску на лету при каждом нажатии клавиши. Вот решение: 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>
person Aram Sahradyan    schedule 20.02.2019