Как лучше сделать поля формы в которых одновременно со значением должен отображаться placeholder?

Question

[Александр Андреев]

В общем дизайнер нарисовал такую вот хрень joxi.ru/brRDRWKsJlx3b2 . Точнее форму регистрации он рисовал обычную просто с placeholder-ами, я её естественно сделал просто как:

<input type="text" name="REGISTER_COMPANY[COMPANY_UR_NAME]" value="" placeholder="Юридическое лицо:">

со всеми стилями и т.п. Её же хотел использовать в форме редактирования, но оказалось что значение нужно отображать вместе с placeholder. Переделывать вёрстку не хочется (добавлять label и пр.), как решение вижу на js получать placeholder поля, оборачивать в какой-нибудь с нужным стилем и вставлять в value поля перед значением. А при отправки формы, перехватывать submit и очищать value от этих span-ов.

Может есть ещё какое-то решение?

Comments

[Александр Андреев]

Не прокатило joxi.ru/82QVa6LSj5XqxA )))

[Никита]

Разбить по параметрам и передать в value в дальнейшем не получится. Инпут не умеет стили разбирать.

Да и цвет не задать разный )

Придется переверстывать

[Александр Андреев]

Никита, да я уже понял, перевёрстываю =(

Answer 1

[OKyJIucT]

Например, вот так https://codepen.io/teefars/pen/qOjWQY . На мой взгляд, проще и быстрей добавить label, чем навешивать JS

Comments

[Александр Андреев]

В общем, я так и сделал ))

Answer 2

[Aleksey Korolev]

А почему из макета вы решили, что необходимо использовать placeholder input'a? Что мешало на этапе верстке использовать label и input стилизованый, как на макете.
Если на этапе верстке этот момент упустили по своей вине или дизайнера, считаю, что правильнее переверстать, как на макете и не городить на js странную логику.
Или предложить апгрейд дизайнеру и/или заказчику, сделать как здесь https://www.tinkoff.ru/deposit/ (смотри форму внизу).

Comments

[Александр Андреев]

Просто изначально дизайнер нарисовал форму регистрации без label с полупрозрачным текстом placeholder. Форма редактирования компании в точности повторяет часть формы регистрации, я думал скопировать её при создании этой страницы, но оказалось что есть отличие, наименование полей надо отображать. А завариант с https://www.tinkoff.ru/deposit/ спасибо!