Динамический размер input/textarea

29 ноября 2021, 08:10

такой вопрос, как сделать, чтобы при вводе или выводе текста при помощи input или чего-либо еще:

Зафиксировать ширину инпута (это я сделал);
Высоту сделать динамической, чтобы она увеличивалась в зависимости от размера?

Вот у меня к примеру есть input.

<input type="text" class ="tcal" size="60" name ="CheckSC" value="$CheckSC"/>

Читал про textarea, но там высоту надо заранее задавать количество строк, но количество строк заранее неизвестно.

Спасибо за внимание=)

Answer 1

Можно использовать div

<div contenteditable="true">test</div>

Answer 2

Для моих целей подойдет один из методов, располагающийся по ссылке https://stackoverflow.com/questions/17772260/textarea-auto-height. Решил его вынести сюда, т.к. в русской версии stackoverflow, подобного я не нашел, думаю это поможет кому-либо еще=)

function auto_grow(element) {
element.style.height = "5px";
element.style.height = (element.scrollHeight)+"px";
}
textarea {
resize: none;
overflow: hidden;
min-height: 50px;
max-height: 100px;
}
<textarea oninput="auto_grow(this)"></textarea>