Автоизменение высоты <textarea>
можно сделать следующим способом:
$('#textarea').on('input', function(){
this.style.height = '1px';
this.style.height = (this.scrollHeight + 6) + 'px';
});
#textarea {
display: block;
width: 500px;
box-sizing: border-box;
margin: 0 0 5px 0;
padding: 10px;
border: solid 3px #e06969;
background-color: #fff;
min-height: 54px;
font-size: 14px;
line-height: 1.2;
}
(this.scrollHeight + 6)
– подбирается экспериментально и зависит от толщины рамок и отступов.
JQuery плагин
Ещё есть расширение – Autosize. Он более стабильно увеличивает поле, задает min-height – поэтому не даёт возможности ресайзить меньше текущей высоты.
<textarea id="textarea" placeholder="Введите текст..."></textarea>
<script src="/jquery.min.js"></script>
<script src="/autosize/dist/autosize.min.js"></script>
<script>
autosize($('#textarea'));
</script>
У меня есть скрытый блок, в нем находится textarea, и есть кнопка при клике на которую блок становиться видимым, в этом случаю скрипт не работает.
Пробовал вешать срабатывание скрипта на событие onclick
Все тщетно =(
Тебе это уже вряд-ли пригодится, но может кому-то понадобится