Как сделать адаптивное поле ввода input?

Question

[mumus]

Есть input type=text, в котором может быть длинное значение:


Как сделать так, чтобы на маленьком разрешении всё значение текстового поля уместить в него? - так как на телефоне не особо удобно это:


Была идея сделать textarea на десктопе и мобильных, но свойство rows стилями не поменять, только height.
Знаю про решения типа autoGrowing, но они Input расширяют только в длину, ну это логично. Остается вариант только с textarea и применить autoGrow?

Comments

[Ankhena]

Есть ещё атрибут contenteditable="true"

Answer 1

[Newto]

Input -- никак. Вы правильно заметили, что его имеет смысл расширять только в ширину. Textarea -- и в высоту. Поэтому если вы хотите, что бы в вашем поле было видно все, что там написано и пользователь мог туда что-то написать, то используйте либо textarea, либо div contenteditable=true

Comments

[mumus]

А есть ли атрибут для дива чтобы передавать его содержимое в форму или уже скриптом собирать данные ?

[Newto]

Скриптом. Создайте скрытую textarea внутри формы и перед сабмитом копируйте в неё контент из этого дива. Это если у вас форма стандартно передается, без аякса. А если аяксом, то всё совсем просто и никаких танцев с бубном не надо, просто берёте контент дива по id элемента и отправляете куда надо...