信用卡掩码JS代码keyup事件网页失效，JSFiddle正常，求协助

首先，你的代码在实际网页中失效的核心原因是事件绑定写法错误，另外还有一些逻辑冗余和拼写问题，我先帮你梳理问题点，再给出优化后的实现。

原代码的问题分析 #

1. 事件绑定完全错误
   你写的$(ccNumInputElement).on(addEventListener('keyup', processCCNum))是jQuery方法和原生方法的错误混用，jQuery的.on()语法是.on(事件名, 回调函数)，这行代码根本没有正确绑定keyup事件，导致输入时不会触发处理函数——这就是实际网页失效的关键原因。

2. 变量拼写错误
   代码里的ccNumHiddemElement拼写错误（应该是ccNumHiddenElement），虽然当前逻辑可能暂时没报错，但属于隐性bug，容易导致后续维护问题。

3. 数组维护逻辑冗余且易出错
   用ccardnumberArray来逐位维护卡号的方式太复杂，尤其是处理删除操作时，数组不会自动同步删除对应元素，会导致隐藏域里的卡号出现错误的空值。

4. 掩码硬编码不够灵活
   直接写死***********这类字符串，后续如果要调整显示规则（比如显示前2位），修改起来非常麻烦。

修复后的原代码（解决失效问题） #

先把核心错误修正，让代码能在实际网页正常运行：

// 修正变量拼写和事件绑定
var ccNumInputElement = $("#ccNumInputField")[0];
var ccNumHiddenFieldID = "creditCardForm.creditCard.cardNumber";
var ccNumHiddenElement = document.getElementById(ccNumHiddenFieldID) || "";
var ccardnumber = "";
var ccardnumberArray = Array(16).fill(""); // 用fill初始化更简洁
var ccardnumberLength = 0;

// 正确绑定事件：jQuery方式
$(ccNumInputElement).on('keyup', processCCNum);

function processCCNum() {
    var inputControl = ccNumInputElement;
    var outputControl = ccNumHiddenElement;
    if (!outputControl) return; // 避免隐藏域不存在时报错

    var inputValue = inputControl.value.replace(/\D/g, ""); // 过滤非数字字符
    ccardnumberLength = inputValue.length;
    var ccardnumberFirst = inputValue.charAt(0);
    
    // 处理删除操作：同步更新数组
    if (ccardnumberLength < ccardnumberArray.filter(item => item !== "").length) {
        ccardnumberArray.splice(ccardnumberLength, ccardnumberArray.length - ccardnumberLength);
        ccardnumberArray = ccardnumberArray.concat(Array(16 - ccardnumberArray.length).fill(""));
    }

    if (ccardnumberLength === 0) {
        ccardnumberMasked = "";
        ccardnumberArray.fill("");
    } else {
        var ccardnumberLast = inputValue.charAt(ccardnumberLength - 1);
        ccardnumberArray[ccardnumberLength - 1] = ccardnumberLast;
        
        var maskLength = (ccardnumberFirst === "3" ? 15 : 16) - 4;
        var ccardnumberMasked = "";
        
        if (ccardnumberLength <= maskLength) {
            ccardnumberMasked = "*".repeat(ccardnumberLength);
        } else {
            ccardnumberMasked = "*".repeat(maskLength) + inputValue.substring(maskLength);
        }

        // 生成完整卡号
        ccardnumber = ccardnumberArray.filter(item => item !== "").join("");
        // 限制卡号长度
        if ((ccardnumberFirst === "3" && ccardnumberLength > 15) || ccardnumberLength > 16) {
            ccardnumber = ccardnumber.substring(0, ccardnumberFirst === "3" ? 15 : 16);
            ccardnumberMasked = ccardnumberMasked.substring(0, ccardnumberFirst === "3" ? 15 : 16);
        }
    }

    inputControl.value = ccardnumberMasked;
    outputControl.value = ccardnumber;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="ccNumInputField" size="51" class="billinginfo" maxlength="16" placeholder="XXXXXXXXXXXX1234" />
<input type="hidden" name="creditCardForm.creditCard.cardNumber" id="creditCardForm.creditCard.cardNumber" />

更简洁的优化实现（推荐） #

上面的修复只是让原代码可用，其实我们可以用更简洁的逻辑实现需求，不需要维护数组，直接处理字符串即可，同时支持粘贴、删除等所有输入场景：

$(function() {
    const $ccInput = $('#ccNumInputField');
    const $ccHidden = $('#creditCardForm\\.creditCard\\.cardNumber'); // 转义ID中的特殊字符

    $ccInput.on('input', function() {
        // 过滤所有非数字字符
        const rawValue = $(this).val().replace(/\D/g, "");
        const cardFirstDigit = rawValue.charAt(0);
        const maxLength = cardFirstDigit === "3" ? 15 : 16;
        const validValue = rawValue.substring(0, maxLength); // 限制卡号长度
        const maskLength = maxLength - 4;
        
        let maskedValue = "";
        if (validValue.length > maskLength) {
            maskedValue = '*'.repeat(maskLength) + validValue.substring(maskLength);
        } else {
            maskedValue = '*'.repeat(validValue.length);
        }

        // 更新输入框显示和隐藏域的真实卡号
        $(this).val(maskedValue);
        $ccHidden.val(validValue);
    });
});

优化点说明： #

• 用input事件代替keyup，能处理鼠标粘贴、右键菜单粘贴等所有输入操作
• 自动过滤非数字字符，避免用户输入无效字符
• 动态计算掩码长度和最大卡号长度，逻辑清晰易维护
• 不需要维护数组，直接通过字符串截取和重复生成掩码，代码更简洁可靠

内容的提问来源于stack exchange，提问作者leon melamud