如何在用户输入时添加千位分隔符？

Question

我需要在用户输入时添加千位分隔符。我有一个观察者函数，它监视绑定到输入的属性，因此每次用户输入输入时，我都会得到两个值，newValue 和 oldValue。

例如：用户想要输入“12600”，它应该显示为“12.600”。

直到那一部分，我的代码才有效。

当我去测试它时，我发现我的功能不能正常工作，因为当我删除一个数字时，它不会删除它。

例如：'12.600' -> '1.260' 不起作用。

在我的函数结束时，我将新值分配给绑定到输入值的属性，因此它会触发另一个更改并再次执行我的函数，这会设置我的属性对旧版的价值。

_turnoverObserver: function (newValue, oldValue) {
      let result = [];

      if (newValue !== undefined && newValue !== null) {
        //this.turnover = String(newValue).split('.').join('').split("").reverse().join("").match(/.{1,3}/g).join(".").split("").reverse().join("");
        //this.turnover = Number(this.turnover).toLocaleString();
        if (newValue.length > 3) {
          let withoutCommasStr = newValue.split('.').join('');
          let withoutComasArr = withoutCommasStr.split('');
          let reversedArr = withoutComasArr.reverse();
          reversedArr.forEach((num, index) => {
            if (index !== 0 && index % 3 === 0) {
              result.push('.');
            }
            result.push(num);
          });
          let finalArr = result.reverse();
          this.turnover = finalArr.join('');
        }
      }
    }

说我想输入“1260”。

1) 1

2) 12

3) 126

4) 1.620

但是当我删除任何数字时它会再次执行我的函数但不会删除它...

1) '1.260'

2) 按删除键

3) 仍然是“1.260”

Answer 1

你可以试试这个jquery

$('input.number').keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  });
});

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

如何在用户输入时添加千位分隔符？

How to add thousands separator while user is typing?

javascript

polymer