如何根据用户输入动态替换div内信用卡号展示位对应的*符号

数据老陈

2026-9-25

问题原因分析

拼写错误：代码中判断长度的lenght为错误拼写，正确写法是length，直接导致条件判断不生效
逻辑缺陷：原有逻辑要求每一组满4位才更新显示，无法实现输入一位就实时替换对应星号的效果
缺少重置逻辑：输入框清空时没有将显示区域重置为默认星号

实现思路

先过滤输入内容，仅保留数字，避免非法字符干扰
限制输入长度最大为16位，符合常规信用卡卡号规则
将输入的数字字符串补全到16位，不足的位置用*填充
把补全后的16位字符串按每4位一组拆分，直接赋值给对应的4个显示区块，无需判断分组长度即可实现实时效果
输入清空时自动重置显示为4组****

完整可运行代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.card-number .section {
  display: inline-block;
  margin-right: 10px;
  font-family: monospace;
  font-size: 18px;
  letter-spacing: 2px;
}
</style>
<div class="card-number"> 
     <div class="section" id="cc_display_number1">****</div>
     <div class="section" id="cc_display_number2">****</div>
     <div class="section" id="cc_display_number3">****</div>
     <div class="section" id="cc_display_number4">****</div>
</div>
<br>
<input type="text" id="cc_number" name="cc_number" required="" maxlength="16" placeholder="请输入16位信用卡号"/>

$("#cc_number").on('input', function() {
    // 过滤仅保留数字
    let number = $(this).val().replace(/\D/g, '');
    $(this).val(number);
    
    // 补全星号到16位
    const fullStr = number.padEnd(16, '*');
    // 按4位拆分
    const parts = [
        fullStr.slice(0,4),
        fullStr.slice(4,8),
        fullStr.slice(8,12),
        fullStr.slice(12,16)
    ];
    
    // 批量更新显示
    $("#cc_display_number1").text(parts[0]);
    $("#cc_display_number2").text(parts[1]);
    $("#cc_display_number3").text(parts[2]);
    $("#cc_display_number4").text(parts[3]);
});