Can't delete formatted Credit Card Number on smartphones

Question

This code works for PC, smartphones, etc. The problem is that when I try to delete numbers from a phone, I cant because it automatic puts spaces after 4, 8, 12th symbol. On windows I just hold backspace and it deletes everything, but on android this is deleting only numbers and it stops at spaces. Everytime I need to select all the numbers (like a CTRL + A on Win) and delete, only in this way all the numbers are deleted with spaces.

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

The easiest solution would be to trim the string before rewriting it.

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