我有這個信用卡資訊的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=""/>uj5u.com熱心網友回復：
查看控制臺中的錯誤 - 在用戶輸入足夠的字符之前，您的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=""/>uj5u.com熱心網友回復：
您需要測驗parts陣列是否具有如下索引：
$("#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] && parts[0].length == 4) {
$("#cc_display_number1").text(parts[0]);
}
if(parts[1] && parts[1].length == 4) {
$("#cc_display_number2").text(parts[1]);
}
if(parts[2] && parts[2].length == 4) {
$("#cc_display_number3").text(parts[2]);
}
if(parts[3] && parts[3].length == 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=""/>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/366025.html
標籤：查询