用逗号

Question

我有一种情况，我试图掩盖不同长度的小数长度。其中一个要求是输入需要在每3个数字之间有一个“，”（自动插入）。小数的精度固定为它们的类型（1精度2，精度等）。所以我们可以输入表格

000,000.00

000,000.000

000,000

我试图在bootstrap中创建这样的东西作为替代方法。但是我似乎无法用输入组设置input-group-addon width和普通的bootstrap样式。

我想知道是否有人为这种输入找到了一个好的解决方案。

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>