Как вы форматируете поле при вводе для валюты, но поддерживает возврат и редактирование?

Question

Мне нравится эта функция ниже, она отлично работает для форматирования долларов США при вводе текста, однако я не смог выяснить проблему с позиционированием курсора, так как это связано с использованием возврата или выделения и замены более один номер за раз. Например, если вы запускаете отсканированный код, попробуйте заменить «32» в числе на «89», используя клавишу backspace или выделив ее и напечатав ее.

Есть ли способ поддержать это? Может быть, с перемещением курсора?

$(document).ready(function() {
  $(this).on('click keyup paste', 'input.dollar:not([readonly])', function(e) {
    if (e.which != 8) {
      var par = $(this).parents('.listingbox');
      // skip for arrow keys
      if (e.which >= 37 && e.which <= 40) return;
      // format number

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input class="dollar" value="$342,323,123" />

Answer 1

Я бы предложил написать один для вашего собственного использования. Некоторые вещи, которые нужно иметь в виду:

• Должны принимать только цифры
• $ символ должен присутствовать только в начале
• Запятые должны появляться при вводе числа (каждые 3 di git, начинающиеся справа)
• Не уверен, разрешены ли десятичные дроби

Имея это в виду, мы можем написать триггер onchange на элементе input .

Дайте мне знать, что еще кто-то имеет в виду.