我有這個信用卡信息的div，分為4組：
<div class="card-number">
<div class="section" id="cc_display_number1">****</div>
<div class="section" id="cc_display_number2">****</div>
<div class="section" id="cc_display_number3">****</div>
<div class="section" id="cc_display_number4">****</div>
</div>
以及這個正在收集用戶信用卡號的輸入：
<input type="text" id="cc_number" name="cc_number" required=""/>
到目前為止，我已經做到了：
$("#cc_number").on('keyup', function() {
var number = $(this).val();
var parts = [];
for (var i = 0; i < number.length; i += 4) {
parts.push(number.substring(i, i + 4));
}
if($(this).val() == "") {
} else {
if(parts[0].lenght == 4) {
$("#cc_display_number1").text(parts[0]);
}
if(parts[1].lenght == 4) {
$("#cc_display_number2").text(parts[1]);
}
if(parts[2].lenght == 4) {
$("#cc_display_number3").text(parts[2]);
}
if(parts[3].lenght == 4) {
$("#cc_display_number4").text(parts[3]);
}
}
});
但它沒有按預期工作。我想在現場輸入替換特定的每個數字*在card-number類股利。有任何想法嗎？
$("#cc_number").on('keyup', function() {
var number = $(this).val();
var parts = [];
for (var i = 0; i < number.length; i += 4) {
parts.push(number.substring(i, i + 4));
}
if($(this).val() == "") {
} else {
if(parts[0].lenght == 4) {
$("#cc_display_number1").text(parts[0]);
}
if(parts[1].lenght == 4) {
$("#cc_display_number2").text(parts[1]);
}
if(parts[2].lenght == 4) {
$("#cc_display_number3").text(parts[2]);
}
if(parts[3].lenght == 4) {
$("#cc_display_number4").text(parts[3]);
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-number">
<div class="section" id="cc_display_number1">****</div>
<div class="section" id="cc_display_number2">****</div>
<div class="section" id="cc_display_number3">****</div>
<div class="section" id="cc_display_number4">****</div>
</div>
<input type="text" id="cc_number" name="cc_number" required=""/>查看控制台中的錯誤 - 在用戶輸入足夠多的字符之前，您的parts數組不會有四個元素，因此parts[1].length即使您更正了錯字，檢查也會失敗。
您還需要填充部分，以防用戶尚未輸入完整的四個字符。
$("#cc_number").on('keyup', function() {
var number = $(this).val();
var parts = [];
for (var i = 0; i < number.length; i += 4) {
parts.push(number.substring(i, i + 4).padEnd(4, "*"));
}
for (var i = 0; i < parts.length; i++) {
$("#cc_display_number" + (i + 1)).text(parts[i]);
}
for (var i = parts.length; i < 4; i++) {
$("#cc_display_number" + (i + 1)).text("****");
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-number">
<div class="section" id="cc_display_number1">****</div>
<div class="section" id="cc_display_number2">****</div>
<div class="section" id="cc_display_number3">****</div>
<div class="section" id="cc_display_number4">****</div>
</div>
<input type="text" id="cc_number" name="cc_number" required=""/>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句