Javascript：在“onkeyup”事件中仅屏蔽信用卡号的前 12 位数字

Question

我想在“onkeyup”事件中将前 12 位数字屏蔽为 * 并保留接下来的 4 位数字。

下面的函数是屏蔽前 12 位数字，但在“onblur”事件中一次全部屏蔽。

我已经尝试过来自 stackoverflow 的所有答案，但没有一个能帮到我。

function formatCardNumber(element) {

        if(element.value.length > 14) {

                var position = element.selectionStart;

                element.value = element.value.replace(/\W/gi, '').replace(/^(.{4})(.{4})(.{4})(.*)$/, "$1 $2 $3 $4");

                if(element.value.length != 19) {

                        element.setSelectionRange(position, position);

                }

        }

        else {

                element.value = element.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ');

        }       

}

function showCardValue() {

        document.getElementById("cardNo").value = document.getElementById("cardNoSafe").value;

}

function hideCardValue(val) {

        document.getElementById("cardNoSafe").value = val;

        var len = val.length;

        if (len >= 14) {

                const regex = /\d{4}(?= \d{1})/g;

                const substr = "****";

                document.getElementById("cardNo").value = val.replace(regex, substr);

        }

}

<div>

  <input id="cardNo" placeholder="Enter Card Number" onfocus="showCardValue()" onblur="hideCardValue(this.value)" onkeypress="formatCardNumber(this)" maxlength="19">

  <input id="cardNoSafe" value="" style="display:none;">

</div>

Answer 1

我无法为您提供完整的解决方案，但这应该足以让您将其适应您自己的工作，包括您所要求的行为:)function hideCardValue(element){&nbsp; var tmpval = element.value;&nbsp; if(tmpval.length <12){&nbsp; &nbsp; var re = /\d{1}/;&nbsp; &nbsp; document.getElementById("cardNoSafe").value += tmpval.replace(new RegExp('\\*', 'g'),"");&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; document.getElementById("cardNo").value = tmpval.replace(/\d{1}/,"*");&nbsp; &nbsp;&nbsp;&nbsp; }}<div>&nbsp; <input id="cardNo" placeholder="Enter Card Number" onkeyup="hideCardValue(this);" maxlength="19">&nbsp; <input id="cardNoSafe" value="" style="display:true;"></div>我使隐藏的 Box 可见以查看安全值。希望这可以帮助 ;）