5

Всем примет! У меня есть 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="t_a"></textarea>

1 Answers1

5

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

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 &gt;= maxWidth) {
 this.style.width = maxWidth;
    this.style.whiteSpace = 'pre-wrap';
}

// Если высота больше максимальной → нафиг ничЁ не надо
if (this.clientHeight &gt; maxHeight) 
    return;    

// Если появляется скролл и его высота клиентской → увеличиваем высоту клиента
if (this.scrollHeight &gt; this.clientHeight) 
 this.style.height = this.scrollHeight + 'px';



})
.demo {
  white-space: nowrap;
  overflow: hidden;         
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="demo"></textarea>
Алексей Шиманский
  • 73,186