无法在智能手机上删除格式化的信用卡号

如何解决无法在智能手机上删除格式化的信用卡号

此代码适用于 PC、智能手机等。问题是当我尝试从手机中删除数字时，我无法删除，因为它会自动在 4、8、12 个符号后放置空格。在 Windows 上，我只是按住退格键并删除所有内容，但在 android 上，这仅删除数字并在空格处停止。每次我需要选择所有数字（如 Win 上的 CTRL + A）并删除时，只有这样才能删除所有数字并带有空格。

      $('#ccNumber').on('keyup',function(){
        var ccNumString = $(this).val()
        ccNumString = ccNumString.replace(/[^0-9]/g,'')
        var typeCheck = ccNumString.substring(0,2);
        var block1 = ''
        var block2 = ''
        var block3 = ''
        var block4 = ''
        var formatted = ''

        // all support card types have a 4 digit firt block
        block1 = ccNumString.substring(0,4);
        if (block1.length==4) {
            block1=block1 + ' ';
        }

        // for 4X4 cards
        block2 = ccNumString.substring(4,8);
        if (block2.length==4) {
            block2=block2 + ' ';
        }
        block3 = ccNumString.substring(8,12);
        if (block3.length==4) {
            block3=block3 + ' ';
        }
        block4 = ccNumString.substring(12,16);
        
        formatted=block1 + block2 + block3 + block4;
        $(this).val(formatted)
    })

input {
width: 250px;
height: 20px;
font-size: 16px;
}

<input type="tel" inputmode="numeric" name="ccNumber" id="ccNumber" placeholder="Enter your credit card number" autocomplete="off" required="" class="leave-message--input donate-form--input" maxlength="19">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

解决方法

最简单的解决方案是在重写之前修剪字符串。

      $('#ccNumber').on('keyup',function(){
        var ccNumString = $(this).val()
        ccNumString = ccNumString.replace(/[^0-9]/g,'')
        var typeCheck = ccNumString.substring(0,2);
        var block1 = ''
        var block2 = ''
        var block3 = ''
        var block4 = ''
        var formatted = ''

        // all support card types have a 4 digit firt block
        block1 = ccNumString.substring(0,4);
        if (block1.length==4) {
            block1=block1 + ' ';
        }

        // for 4X4 cards
        block2 = ccNumString.substring(4,8);
        if (block2.length==4) {
            block2=block2 + ' ';
        }
        block3 = ccNumString.substring(8,12);
        if (block3.length==4) {
            block3=block3 + ' ';
        }
        block4 = ccNumString.substring(12,16);
        
        formatted=block1 + block2 + block3 + block4;
        $(this).val($.trim(formatted))
    })

input {
width: 250px;
height: 20px;
font-size: 16px;
}

<input type="tel" inputmode="numeric" name="ccNumber" id="ccNumber" placeholder="Enter your credit card number" autocomplete="off" required="" class="leave-message--input donate-form--input" maxlength="19">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>