0

此代码适用于 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>

4

1 回答 1

1

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

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

于 2021-02-28T21:25:42.270 回答