在输入货币时如何格式化字段但支持退格和编辑？

Question

我喜欢下面的这个功能，它非常适合在您键入时格式化美元，但是，我无法找出光标重新定位的问题，因为它与使用退格键或突出显示和替换更多有关一次一个数字。例如，如果您运行被截断的代码，请尝试使用退格键将数字中的“32”替换为“89”或突出显示它并在上面输入。

有没有办法支持这个？也许用光标重新定位？

$(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 位）
• 不确定是否允许使用小数

记住这一点，我们可以在输入元素上编写onchange 触发器。

让我知道其他人的想法。