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

Question

• 我想在"onkeyup"事件中将前 12 位数字屏蔽为 *，然后离开下一个 4 位数字。
• 下面的函数是屏蔽前 12 位数字，但一次全部屏蔽 "模糊"事件。
• 我已经尝试了堆栈溢出的所有答案，但没有一个帮助我。

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){
var tmpval = element.value;
if(tmpval.length <12){
var re = /d{1}/;
document.getElementById("cardNoSafe").value += tmpval.replace(new RegExp('\*', 'g'),"");

document.getElementById("cardNo").value = tmpval.replace(/d{1}/,"*");

}
}

<div>
<input id="cardNo" placeholder="Enter Card Number" onkeyup="hideCardValue(this);" maxlength="19">
<input id="cardNoSafe" value="" style="display:true;">
</div>

我使隐藏的框可见，以便查看安全值。

希望这对;)有所帮助

问候

Answer 2

您可以将输入拆分为 4 个单独的输入，而每个输入都定义为密码(只有最后一个是纯文本(。

通过这种方式，您将能够隐藏大部分数字，只显示最后 4 位数字。

当然，您需要使用一些css:)美化它

function moveToNext(curr, next) {
if ($(curr).val().length === 4) {
next.focus();
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<input id="part1" type="password" maxlength="4" onkeyup="moveToNext(part1, part2)"/>
<input id="part2" type="password" maxlength="4" onkeyup="moveToNext(part2, part3)"/>
<input id="part3" type="password" maxlength="4" onkeyup="moveToNext(part3, part4)"/>
<input id="part4" type="text" maxlength="4"/>
</div>