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

Question

此代码适用于 PC、smartphones 等。问题是当我尝试从 phone 中删除数字时，我做不到，因为它会自动在 4、8 之后放置空格, 第 12 个符号。在 windows 上，我只是按住退格键，它会删除所有内容，但在 android 上，这只会删除数字，并且会在空格处停止。每次我需要 select 所有数字（如 CTRL + A 在 Win 上）并删除时，只有这样所有数字都被删除了空格。

      $('#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>

Answer 1

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

      $('#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>

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

Can't delete formatted Credit Card Number on smartphones

javascript

credit-card

formatted-text