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）按Delete

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>

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

1 个答案: