Как адаптировать текстовые инпуты формы в высоту?

[r_219]

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

 

[AlexSVG]

HTML

<textarea id="editor"></textarea>

JS

var editor = document.getElementById('editor');
editor.addEventListener('keyup',function(){
this.style.height = parseInt(this.value.split(/[\n\r]/))*14+'px';
},false)

и css

teaxtarea{
line-height:14px;
font-size:14px;
white-space:nowrap;// для того чтобы строки не переносились
}

 

[r_219]

Спасибо, вопрос решил вот таким способом:

Спойлер

Для просмотра ссылки Войди или Зарегистрируйся

 

[AlexSVG]

В принципе как вариант норм. Я думал что тебе нужно сам textarea увеличивать без скролла. Ну если так норм то хорошо. И там есть проблема. При минимальном плейсхолдере высота остается одной строчки.

 

[r_219]

Единственное, что не устраивает - когда инпут адаптируется под текст, внизу отступ крайне маленький

При минимальном плейсхолдере высота остается одной строчки.

Здесь не понял.

 

[AlexSVG]

Здесь не понял.

Ну вот я вписал в placeholder одно слово. В textarea появилось одно слово . При вводе текста остается высота равная высоте одной строчки. И в форме появляется просто вертикальный скролл. Видимость не очень хорошая.

 

[r_219]

Ну вот я вписал в placeholder одно слово. В textarea появилось одно слово . При вводе текста остается высота равная высоте одной строчки. И в форме появляется просто вертикальный скролл. Видимость не очень хорошая.

Поможете решить эту проблему?