#javascript #jquery
Вопрос:
Это форма кода проверки, и я хочу показать введенный номер на желтом входе, но проблема в том, что когда вы вводите 4 номера, затем вводите новые номера или обновляете старые номера, желтый ввод не обновляется, и я хочу показать номер на желтом входе только в том случае, если все 4 входа имеют значение, если нет, очистите желтый ввод.
var code = [];
$('.verf-code input').keyup(function(e) {
var key = e.which;
var val = $(this).val();
$(this).each(function() {
if (key >= 48 amp;amp; key <= 57) {
$(this).next('input').select().focus();
code.push(val);
return true;
} else {
return false;
}
});
if (code.length <= 4) {
$('.verification-code').val(code.join(''));
} else {
code = [];
}
}); .verification-code {
background: yellow;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verf-code"><input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="1" />
<input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="2" />
<input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="3" />
<input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="4" /></div>
<input type="text" class="verification-code"> Ответ №1:
Вам не нужен дополнительный цикл ( each ) в вашем keyup событии. Вам нужно обновить code массив в каждой позиции, которую я использую index для этого.
Вот рабочий образец:
var code = [];
$('.verf-code input').keyup(function (e) {
var key = e.which;
var val;
if (key >= 48 amp;amp; key <= 57) {
val = $(this).val();
}
else
val = "-1";
$(this).next('input').select().focus();
code[$(this).index()] = (val);
if (code.length == 4 amp;amp; !code.includes("-1"))
$('.verification-code').val(code.join(''));
else
$('.verification-code').val('');
}); .verification-code {
background: yellow;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verf-code">
<input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="1" />
<input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="2" />
<input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="3" />
<input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="4" />
</div>
<input type="text" class="verification-code"> Комментарии:
1. Хм, спасибо, только одно, когда вы очистите один вход, можете очистить желтый вход ? Я просто хочу показать код, когда все 4 входа будут заполнены. уже когда вы очищаете один вход, он возвращает ноль на желтом
2. @tourtravel Да, я обновил ответ на основе вашего комментария. пожалуйста, проверьте это. теперь, если вы очистите один ввод, он очистит желтое значение
3. @tourtravel обратите внимание, что для этого вам не нужен дополнительный цикл. теперь вы используете ненужный цикл!
4. Вы не можете вернуться на вкладку в этом коде
Ответ №2:
var code = [];
$('.verf-code input').on("input", function(e) {
this.value = this.value.match(/d/) || "";
if (this.value.length === 1) {
$(this).next('input').select().focus();
code[$(this).index()] = this.value
const vc = code.join('')
$('.verification-code').val(vc.length === 4 ? vc : '');
}
}); .verification-code {
background: yellow;
width: 72px;
}
.verf-code {
width: 80px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verf-code">
<input class="afc-form__item__input" name="verf" type="text" maxlength="1" size="1" pattern="d" tabindex="1" />
<input class="afc-form__item__input" name="verf" type="text" maxlength="1" size="1" pattern="d" tabindex="2" />
<input class="afc-form__item__input" name="verf" type="text" maxlength="1" size="1" pattern="d" tabindex="3" />
<input class="afc-form__item__input" name="verf" type="text" maxlength="1" size="1" pattern="d" tabindex="4" />
<input type="text" class="verification-code" readonly>
</div> Комментарии:
1. Спасибо за ваш ответ; Почти, но я не хочу использовать номер типа, потому что стрелки и не хочу бороться с внешним видом webkit или т. Д. Стрелки Делают мой пользовательский интерфейс уродливым. а также можем ли мы что-то сделать, когда ввод становится пустым или пустым, желтый ввод становится чистым? (последнее предложение в моем вопросе)
2. @tourtravel Я сделал новую версию, которая не допускает ничего, кроме цифр
3. @tourtravel Я думаю, что этот код более элегантен и позволяет пользователю переходить на вкладку назад, чтобы изменить номера
Ответ №3:
Я бы использовал data-id атрибут, чтобы отслеживать, какие входные данные имеют значение.
Затем я бы отфильтровал code массив, чтобы удалить любые пустые значения, и использовал бы это, чтобы определить, должен ли ваш ввод проверки иметь значение:
var code = [];
$('.verf-code input').keyup(function(e) {
var key = e.which;
var val = $(this).val();
code[$(this).attr("data-id")] = $(this).val();
$(this).each(function(index) {
if (key >= 48 amp;amp; key <= 57) {
$(this).next('input').select().focus();
return true;
} else {
return false;
}
});
var filtered = code.filter(function (el) {
return el != "";
});
if (filtered.length == 4) {
$('.verification-code').val(code.join(''));
} else {
$('.verification-code').val('');
}
}); .verification-code {
background: yellow;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verf-code">
<input data-id="0" class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="1" />
<input data-id="1" class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="2" />
<input data-id="2" class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="3" />
<input data-id="3" class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="4" />
</div>
<input type="text" class="verification-code"> Комментарии:
1. Этот код допускает буквы — он не продвигается вперед, но позволяет им