Как добавить разделитель тысяч, когда пользователь печатает? - PullRequest
Новая
       7

Как добавить разделитель тысяч, когда пользователь печатает?

0 голосов
/ 04 апреля 2019

Мне нужно добавить разделитель тысяч, пока пользователь печатает. У меня есть функция наблюдателя, которая следит за свойством, которое привязано к входу, поэтому каждый раз, когда пользователь вводит данные, я получаю два значения, 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»

1 Ответ

0 голосов
/ 04 апреля 2019

Вы можете попробовать этот 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>
...