#jquery
Вопрос:
У меня есть этот div с информацией о кредитной карте, разделенной на 4 группы:
lt;div class="card-number"gt; lt;div class="section" id="cc_display_number1"gt;****lt;/divgt; lt;div class="section" id="cc_display_number2"gt;****lt;/divgt; lt;div class="section" id="cc_display_number3"gt;****lt;/divgt; lt;div class="section" id="cc_display_number4"gt;****lt;/divgt; lt;/divgt; и этот ввод, который собирает номер кредитной карты пользователя:
lt;input type="text" id="cc_number" name="cc_number" required=""/gt; Я сделал до сих пор это:
$("#cc_number").on('keyup', function() { var number = $(this).val(); var parts = []; for (var i = 0; i lt; 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 классе div. Есть какие-нибудь идеи?
$("#cc_number").on('keyup', function() { var number = $(this).val(); var parts = []; for (var i = 0; i lt; 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]); } } }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="card-number"gt; lt;div class="section" id="cc_display_number1"gt;****lt;/divgt; lt;div class="section" id="cc_display_number2"gt;****lt;/divgt; lt;div class="section" id="cc_display_number3"gt;****lt;/divgt; lt;div class="section" id="cc_display_number4"gt;****lt;/divgt; lt;/divgt; lt;input type="text" id="cc_number" name="cc_number" required=""/gt; Ответ №1:
Посмотрите на ошибки в вашей консоли — до тех пор, пока пользователь не введет достаточное количество символов, в вашем parts массиве не будет четырех элементов, поэтому проверка parts[1].length завершится неудачей, даже если вы исправите опечатку.
Вам также необходимо дополнить части, если пользователь еще не ввел полные четыре символа.
$("#cc_number").on('keyup', function() { var number = $(this).val(); var parts = []; for (var i = 0; i lt; number.length; i = 4) { parts.push(number.substring(i, i 4).padEnd(4, "*")); } for (var i = 0; i lt; parts.length; i ) { $("#cc_display_number" (i 1)).text(parts[i]); } for (var i = parts.length; i lt; 4; i ) { $("#cc_display_number" (i 1)).text("****"); } }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="card-number"gt; lt;div class="section" id="cc_display_number1"gt;****lt;/divgt; lt;div class="section" id="cc_display_number2"gt;****lt;/divgt; lt;div class="section" id="cc_display_number3"gt;****lt;/divgt; lt;div class="section" id="cc_display_number4"gt;****lt;/divgt; lt;/divgt; lt;input type="text" id="cc_number" name="cc_number" required=""/gt; Комментарии:
1. Абсолютно то, о чем я просил. Единственная проблема заключается в том, что вы быстро вводите и быстро удаляете номер карты, который скрипт прослушивает и не заменяет
*. Есть идеи, как это исправить?2. Я добавил дополнительный цикл для сброса элементов, выходящих за рамки того, что ввел пользователь. Кроме этого, я не могу печатать достаточно быстро, чтобы сломать его. 🙂
Ответ №2:
Вам нужно проверить, есть ли parts у массива такой индекс, как:
$("#cc_number").on('keyup', function() { var number = $(this).val(); var parts = []; for (var i = 0; i lt; number.length; i = 4) { parts.push(number.substring(i, i 4)); } if($(this).val() == "") { } else { if(parts[0] amp;amp; parts[0].length == 4) { $("#cc_display_number1").text(parts[0]); } if(parts[1] amp;amp; parts[1].length == 4) { $("#cc_display_number2").text(parts[1]); } if(parts[2] amp;amp; parts[2].length == 4) { $("#cc_display_number3").text(parts[2]); } if(parts[3] amp;amp; parts[3].length == 4) { $("#cc_display_number4").text(parts[3]); } } }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="card-number"gt; lt;div class="section" id="cc_display_number1"gt;****lt;/divgt; lt;div class="section" id="cc_display_number2"gt;****lt;/divgt; lt;div class="section" id="cc_display_number3"gt;****lt;/divgt; lt;div class="section" id="cc_display_number4"gt;****lt;/divgt; lt;/divgt; lt;input type="text" id="cc_number" name="cc_number" required=""/gt;