格式化输入详细信息

Question

我想让卡号的输入字段实时显示为（xxxx-xxxx-xxxx-1234）。它只会显示用户添加的最后4位数字。当前，格式为1234-1234-1234-1234，我的代码如下。

JS文件。

function formatCreditCard() {
    var x = document.getElementById("cardno");
    var index = x.value.lastIndexOf('-');
    var test = x.value.substr(index + 1);
    if (test.length === 4 && x.value.length < 16)
         x.value = x.value + '-';
}

HTML

<input type="text" class="form-control w-60" onkeyup="formatCreditCard();" id="cardno" maxlength="19" placeholder="xxxx-xxxx-xxxx-xxxx" required>