Как реализовать такую форму?

Question

[Евгений]

Как реализовать такую форму что на картинке?
Задача: нужно чтобы юзер мог ввести значения для своего будущего номерного знака.

Как мне видится - это создать 8-мь input'ов и прицепить к данной картинке, но мне кажется, есть лучше решения.
У кого какие доводы, опыт в данных формах есть? Какой лучший вариант?

Пример, как выглядит форма

Answer 1

[dollar]

Canvas, если хочется быть уверенным в кроссбраузерности.
Степень геморности примерно такая же.

При правильном программировании можно будет в будущем легко масштабировать форму целиком и тюнить внутренние макро параметры, меняя лишь константы в скрипте.

С другой стороны, вы потеряете всех, у кого отключён JS в браузере (на вашем сайте).

Answer 2

[Eugene Chefranov]

Я бы сделал один input (для основного номера) и собрал шрифт с двумя начертаниями, одно без заливки, а другое с заливкой. И для placeholder задал бы тот который без заливки, а для поля в фокусе с заливкой. И прикрутил бы какой-нибудь jquery.mask, чтобы бред не писали.

На icomoon можно такое сделать. Вам понадобятся все необходимые буквы и цифры от 0 до 9 в svg, в двух вариантах с заливкой и без.

Comments

[Евгений]

Ок, шрифт для номеров имеется, с jquery mask спасибо что подсказал, думаю хорошее решение.

[Eugene Chefranov]

toohappy, тогда все в ваших руках :)
P.S. возможно вам все таки придется сделать свой шрифт, так как у вас в одном инпуте будут буквы и цифры разных размеров, вам надо изначально в сам шрифт заложить цифры больше размером чем буквы, хотя возможно у вас сразу это есть в шрфите