使用 JS vanilla 为输入提供特定格式

Question

我正在使用 JS vanilla 创建一张信用卡，我希望用户输入卡号后，唯一可见的数字是最后 4 位数字。

**** **** **** 2345

所以我想我可以给不可见的号码ccHiddenNumbers一个ID，给可见的号码ccNumber另一个ID，将它们写在我想要打印输入的 HTML 部分中。正如你可以想象的那样，我收到了一个错误，因为当然，因为我在打印位置调用 Ids，所以没有收到数据。 <代码> **** **** **** 0000 然后我将此 id 移至输入字段，最终我感到困惑，因为输入应该只是同时包含 ccNumbers 和 ccHiddenNumbers 的内容。 当然，即使我已经将 id 更改为输入字段，我仍然会遇到相同的错误。

有人对我应该如何解决这种情况有建议吗？

 

var cardNumbers= document.getElementById('cardNumbers')

    var ccNumber= document.getElementById('ccNumber').value;
    document.getElementById('ccHiddenNumber').ccNumber;
    console.log('this is the cc TOTAL NUMBER: '+ccNumber);
    var ccVisibleNumber = ccNumber.substring(ccNumber.length-4);
    console.log('this is the CC number: '+ ccVisibleNumber);
    document.getElementById('ccNumber').value = '**** **** **** '+ ccVisibleNumber;

cardNumbers.addEventListener('input', function () {
        if (cardNumbers.value.length === 0) {
            document.getElementById('cardNumbers').innerHTML = '**** **** **** 2345';
        } else {
            document.getElementById('cardNumbers').innerHTML = cardNumbers.value;
        }
    });

<!--input field-->
<div class="field-container">
        <label for="ccNumber">Card Number</label>
        <input id="ccNumber" type="text" pattern="[0-9]*" inputmode="numeric" placeholder="0000 0000 0000">
        <input id="ccHiddenNumber" type="text" pattern="[0-9]*" inputmode="numeric" placeholder="0000">
</div>

<!--printed info-->
 <span id=cardNumbers> **** **** **** 0000 </span>