Динамическое изменение размеров textarea под содержимое

#jquery

Всем примет! У меня есть textarea. Как мне сделать, что бы  него ширина и высота
изменялись под размер содержимого текста?

Я попробовал сделать в ширину, но вышло что-то не то. У всех знаков разная ширина
и ширина, то была слишком маленькая, то большая.



var $textarea = $('#t_a');

$textarea.on('input', function() {
  var val_length = $(this).val().length;
  
  $(this).css({width: val_length * 10});
});
#t_a {
  width: 20px; 
  height: 20px;
  min-width: 20px; 
  max-height: 20px;
}





    

Ответы

Ответ 1

Возможно что-то упустил, но как-то так:



var maxWidth = 200;
var maxHeight = 100;

$('.demo').on('input', function(e){			
    // Если появляется скролл и его ширина больше клиентской → увеличиваем ширину
клиента
    if (this.scrollWidth > this.clientWidth) 
    	this.style.width = this.scrollWidth + 'px';
      
    // Если ширина больше максимально допустимой → даем словам "ломаться" и фиксируем
ширину
    if (this.clientWidth >= maxWidth) {
    	this.style.width = maxWidth;
        this.style.whiteSpace = 'pre-wrap';
    }
  
    // Если высота больше максимальной → нафиг ничЁ не надо
    if (this.clientHeight > maxHeight) 
        return;    
      
    // Если появляется скролл и его высота клиентской → увеличиваем высоту клиента
    if (this.scrollHeight > this.clientHeight) 
    	this.style.height = this.scrollHeight + 'px';
})
.demo {
  white-space: nowrap;
  overflow: hidden;         
}