Маскирование десятичной точности запятыми

Question

У меня есть ситуация, когда я пытаюсь замаскировать десятичную длину различной длины. Одно из требований заключается в том, что ввод должен иметь ',' между каждыми 3 цифрами (вставляется автоматически). Точность десятичных дробей фиксируется в зависимости от их типа (1 точность 2, точность и т. Д.). Таким образом, мы могли бы иметь входные данные вида

000,000.00

000,000.000

000,000

Я попытался создать что-то подобное в начальной загрузке в качестве альтернативного подхода. Однако я не могу сделать это с группами ввода, устанавливающими ширину ввода-группы-добавления с помощью обычного стиля начальной загрузки.

Мне было интересно, если кто-нибудь сталкивался с хорошим решением для такого рода ввода.

Answer 1

Вы можете использовать jQuery; например, рассмотрим этот скрипт (он предполагает ввод с идентификатором number):

<script type="text/javascript">
  $(document).ready(function() {
    function reverseStr(str) {
      return str.split("").reverse().join("");
    }

    $('#number').on('change', function() {
      var value = reverseStr($(this).val().replace(/,/g, "")).match(/.{1,3}/g).join();

      $(this).val(reverseStr(value));
    });
  });
</script>

Этот скрипт будет применять запятую каждые три символа каждый раз, когда ввод number изменения (т.е. когда ввод теряет фокус).

Проверьте фрагмент:

$(document).ready(function() {
  function reverseStr(str) {
    return str.split("").reverse().join("");
  }

  $('#number').on('change', function() {
    var value = reverseStr($(this).val().replace(/,/g, "")).match(/.{1,3}/g).join();

    $(this).val(reverseStr(value));
  });
});

.number, .decimals {
  margin: 0px;
  border: 0px;
  font-size: 12px;
  color: #777;
  padding: 8px;
  color: #999;
  font-weight: 500;
}

.number {
  width: 150px;
}

.decimals {
  width: 50px;
}

.inputs {
  background-color: #ccc;
  border: 1px solid #ccc;
  padding: 0px;
  display: inline-block;
}

.dot {
  width: 20px;
  display: inline-block;
  text-align: center;
}

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

<div class="inputs">
  <input type="text" id="number" class="number" placeholder="000,000">
  <div class="dot">.</div>
  <input type="text" id="decimals" class="decimals" placeholder="00">
</div>