Поле для ввода кода (OTP)

Код подтверждения из четырёх-шести знаков привычно вводить в отдельные клетки: так видно, сколько знаков осталось, и не приходится вглядываться в слитную строку. В Тильде такого поля нет — модификация делает его из обычного текстового поля формы.

Что настраивается

• Имя инпута — то же, что в поле «Имя переменной» настроек формы.
• Количество ячеек — от 2 до 12.
• Что можно вводить — только цифры или цифры с латинскими буквами (буквы приводятся к верхнему регистру).
• Разделитель между группами — например тире после третьей ячейки: 123–456. Символ свой.
• Отправлять форму, когда код введён полностью — для формы, в которой кроме кода ничего нет.
• Не отправлять неполный код — форма покажет штатную ошибку Тильды, если заполнены не все ячейки.
• Оформление — размер ячейки, расстояние, скругление, толщина и цвет рамки, цвет активной ячейки, фон, размер и цвет символа, цвет рамки при ошибке.

Как это устроено

Ячейки — это накладка, а ввод принимает одно настоящее поле формы, растянутое поверх них и сделанное прозрачным. Из этого следует всё остальное:

• Вставка работает целиком. Скопированное «Ваш код: 123 456» превращается в 123456: лишнее отбрасывается.
• Код из СМС подставляется сам. Полю проставляется autocomplete="one-time-code", поэтому iOS и Android предлагают код из полученного сообщения одним касанием.
• Backspace, стрелки, выделение, отмена ввода — обычное поведение поля, ничего не переопределяется.
• В форму уходит одно значение под тем же именем, что и было: настройки формы, интеграции и правила проверки менять не нужно.
• Курсор рисуется в активной ячейке и мигает, пока поле в фокусе.

Ячейки сжимаются пропорционально, если поле стоит в узкой колонке или на телефоне: пропорция ширины к высоте сохраняется, а ряд не вылезает за границы формы.