Как сделать чтобы после того как человек закончил заполнять поле, оно автоматом перекидывало на следующее поле?

Question

[olya_097]

Как сделать чтобы после того как человек закончил заполнять поле, оно автоматом перекидывало на следующее поле?

upd. есть к примеру
поле номер карты

там должно быть не меньше 16 цифр с пробелами( тоесть по сути 19)
но и не больше
как ввели 19 - перекидывает на следуещий инпут

https://jsfiddle.net/sy05kpx3/

Comments

[Тарас Шульга]

Можно как-то ограничить количество символов и после этого делать переход. Ибо первый и самый главный вопрос - как понять, что человек заполнил поле?

[olya_097]

Тарас Шульга, ну как таковое ограничения тут и не нужно
может потеря фокуса
не знаю

[Алексей Ярков]

olya_097,

Ибо первый и самый главный вопрос - как понять, что человек заполнил поле?

Ответьте сами себе на этот вопрос и всё само собой разрешится.

[olya_097]

Алексей Ярков, ну вопрос в том

что есть к примеру
поле номер карты

там должно быть не меньше 16 цифр с пробелами( тоесть по сути 19)
но и не больше
как ввели 19 - перекидывает на следуещий инпут

[Алексей Ярков]

olya_097, ну и отлично. Вешаем обработчик на input, в нем смотрим на длину value. Если 19, то ставим фокус в следующее поле.

[olya_097]

Алексей Ярков, допустим
но если таких полей 3?
тоесть к примеру еще нужно проверять срок действия

[Алексей Ярков]

olya_097, алгоритм тот же. В чём конкретно вопрос?

[olya_097]

Алексей Ярков, как это сделать без дублирования

[Алексей Ярков]

olya_097, совершенно никакого дублирования не надо. Вы бы в песочнице пример формы вашей запилили уже.

[Алексей Ярков]

olya_097, но вообще идея так себе для формы ввода данных карты. Вот пишу я номер 1111 1111 1111 1112 и меня перекидывает в следующее поле. А я опечатался и вместо последней 2 хотел ввести 1. МНе надо возвращаться теперь.

[olya_097]

Алексей Ярков, https://jsfiddle.net/sy05kpx3/

Answer 1

[Алексей Ярков]

Прям вот на скорую руку: https://jsfiddle.net/yarkov_aleksei/10p9d347/

Comments

[olya_097]

Алексей Ярков, это да
спасибо
но меньше оно принимает

[olya_097]

Алексей Ярков, а зачем тутinputs.length - 1?

в данной строке const index = Math.min(i + 1, inputs.length - 1);

вроде если это убрать - то все будет работать без изменений

[olya_097]

Алексей Ярков, я понимаю что это значит

Uncaught TypeError: Невозможно прочитать свойство 'focus' из undefined
в HTMLInputElement. <анонимный> ((индекс): 91)

но почему именно так - непонятно

это показывается если убратьinputs.length - 1

[Алексей Ярков]

olya_097, и происходит это в последнем инпуте. Да?

[olya_097]

Алексей Ярков, да

[Алексей Ярков]

olya_097,

но почему именно так - непонятно

const index = Math.min(i + 1, inputs.length - 1);
Высчитывается порядковый номер инпута с учётом максимально возможного. Если в последнем инпуте срабатывает, то фокус остаётся там же, так как следующего не существует.

[olya_097]

Алексей Ярков, спасибо

Answer 2

[Алексей]

https://jsfiddle.net/SnowLeo/gzk6yr1a/7/

var cNum = document.getElementById('c_number');
cNum.oninput = function(e) {
  if (cNum.value.length == 19) {
  	document.getElementById('c_fio').focus();
  }
}

Answer 3

[Karpion]

Почитать, какие обработчики событий можно навесить на поле ввода. Выбрать подходящий - типа "изменение содержимого". Проверять там условие завершения ввода. При исполнении условия - перекинуть фокус на следующее поле.