根据输入替换div中的特定符号

Question

我有这个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=""/>

Answer 1

查看控制台中的错误-在用户输入足够的字符之前，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=""/>

Answer 2

您需要测试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=""/>