javascript - 当我按退格键时，逗号被插入输入框，数字没有按要求格式化

Question

我正在制作一个输入框，在输入时插入逗号作为千位分隔符(印度货币样式)。它工作正常。但是当我按退格键时，它会插入不必要的逗号并且逗号不会重新排列。

例如:当我输入 1111111 时，我得到结果 11,11,111 ，但是当我按退格键并将其设为 11,11,11 时，它不会得到调整。,.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    $('input.number').keyup(function(event) {
        // skip for arrow keys
        if(event.which >= 37 && event.which <= 40) return;
        // format number
        $(this).val(function(index, value) {
            var x=value;
            x=x.toString();
            var lastThree = x.substring(x.length-3);
            var otherNumbers = x.substring(0,x.length-3);
            if(otherNumbers != '')
                lastThree = ',' + lastThree;
            var res = otherNumbers.replace(/\D/g, "").replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
            return res;
            //document.getElementById("textInput").value=res;   
            //return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        });
    });
</script>
<input class="number" style="width:140px; height:40px; outline: 0;" >

Answer 1

在回调函数中添加一个简单的 console.log(x)(在 var x=value; 行之后)显示问题所在:

当您在输入字段中已有 1,111 时，然后在光标位于其末尾时按下退格键，您的函数输入值为 1,11(因为退格键删除了当前值的最后一个字符)——然后您使用 var lastThree = x.substring(x.length-3); 行从中获取最后三个字符, 这会得到 ,11，然后您将其再次附加到最终结果中——因此您会得到两个连续的逗号。

我认为最简单的解决方法是在开始处理值之前删除所有逗号，

$(this).val(function(index, value) {
     var x=value.replace(/,/g, "");
     // rest of code here

– 这为您提供了一个“干净”的值，其中没有任何逗号，因此您通过子字符串方法定位该值的部分的逻辑不会被它们抛出。

(并且输入字段的值始终是字符串，因此 x=x.toString(); 是多余的。)