Как сделать один input из нескольких?

Question

[Думай Головой]

Всем привет!

Часто в дизайнах попадается такое поля ввода (это один инпут по логике):

По идее нужно руки отрывать дизайнеру за такое, доказывать заказчику, что это не варик.
Но может есть решение таких ситуаций?

Answer 1

[Павел Гоголинский]

Это три импута

Comments

[Думай Головой]

@gogolinsky
Это один из примеров. А как быть если 4 поля для ввода номера карты? Это то точно должен быть один инпут

[Павел Гоголинский]

Это будет 4 поля ввода, как вы и сказали. На бэкенде вы можете их значения объединить в одну переменную, но на фронте это будет 4 поля. Вы также можете не разбивать номер карты на 4 поля, а вписывать его только в одно поле. jessepollak.github.io/card

Answer 2

[Pavel K]

Руки нужно отрывать за неумение их делать правильно.
Т.е. с маской ввода, подсказками, а главное авто переходом в следующий после заполнения и авто валидацией без отправки формы.
И да, тут три инпута.

Comments

[Думай Головой]

@PavelK
Это один из примеров. А как быть если 4 поля для ввода номера карты? Это то точно должен быть один инпут

[Pavel K]

Думай головой, думай головой!
Если четыре, значит четыре инпута, потом объединить в один не сложно.
Если хочется, что бы был один name то для каждый инпут должен выглядеть примерно так:

Ключевое здесь "[]"

Вот небольшой примерчик:
https://jsfiddle.net/rxnk2gg6/3/

В php соответственно получаете $creditCardNumber=implode($_GET['creditcard']);

Сколько бы не было инпутов, они все занесутся и будут одной строкой.
Только потом не забудьте добавить проверки.

Если будут ещё вопросы, то лучше Вам начать с чтения спецификаций.

[Думай Головой]

Pavel K
Я знаю спецификацию. По такой методике запись в массив идёт в случайном порядке кстати.

[Pavel K]

Кстати, не в случайном.