HTML TextArea автоматически изменяет размер

Я бы хотел иметь текстовую область, которая всегда будет такой же большой, как текст в ней. Таким образом, страница может быть прокручена, а в области текста нельзя прокручивать.
Вот что я делал до сих пор:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {height: 100%;}
textarea {
border: none;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
line-height: 44px;
font-family:Helvetica;
font-size: 17pt;
-webkit-tap-highlight-color: rgba(0,0,0,0);
background-image:url('[email protected]');
outline: none;
resize: none;
}
textarea.vert { resize:vertical; }
</style></head><body>
<textarea id="InputTextArea" placeholder="placeholder"></textarea>
</body></html>

Ответ 1

Изменение размера TeaxArea на основе номера строки содержимого. Здесь DEMO

function resizeTextarea (id) {
  var a = document.getElementById(id);
  a.style.height = 'auto';
  a.style.height = a.scrollHeight+'px';
}

function init() {
  var a = document.getElementsByTagName('textarea');
  for(var i=0,inb=a.length;i<inb;i++) {
     if(a[i].getAttribute('data-resizable')=='true')
      resizeTextarea(a[i].id);
  }
}

addEventListener('DOMContentLoaded', init);

HTML

<textarea id="InputTextArea" placeholder="placeholder" onkeyup="resizeTextarea('InputTextArea')"></textarea>

Ответ 2

Если вы используете AngularJS, вы можете сделать:

<textarea ng-keyup="ctl.handleTextAreaHeight($event)"></textarea>

С этим в контроллере:

this.handleTextAreaHeight = function (e) {
  var element = e.target;

  element.style.overflow = 'hidden';
  element.style.height = 0;
  element.style.height = element.scrollHeight + 'px';
};

Ответ 3

На тот случай, если кому-то это все еще нужно, то, чего оно стоит, вот мое в чистом js. Но сначала вы можете проверить это: Автоматическое расширение текстовой области с помощью jQuery.

    var textAreas = document.getElementsByTagName('textarea');
    try {
        taLength = textAreas.length;
        for (i=0; i < taLength; i++) {
            var taId = textAreas[i].id;
            document.getElementById(taId).addEventListener('input', function(e) {
                e.target.style.height = "auto";
                    //This makes your textarea back to its original size. So you can replace it with any size you want it to have e.g. "120px"
                    //You may need some logic if you have multiple taxtareas with different original sizes
                e.target.style.height = e.target.scrollHeight+'px';
            });
        }
    }
    catch (err) {
        window.alert(err);
    }

Я использовал ответ shubhra, чтобы построить тот. Он плавный и полоса прокрутки не появится.

Ответ 4

Если вы используете Angular 2+, вы можете использовать эту библиотеку: https://github.com/stevepapa/ng-autosize

Для Ionic 2: https://github.com/flivni/ionic2-autosize

Для Ionic 4: https://github.com/azure06/ionic4-reactive-textarea

Ответ 5

Если кому-то нужно решение для Vue.js. Вот директива vue для автоматического изменения размера текстовой области. Просто зарегистрируйте директиву глобально один раз, и вы сможете использовать ее для любой текстовой области

Vue.directive('resizable', {
    inserted: function (el) {
        el.addEventListener('input', function(e) {
            e.target.style.height = "auto";
            e.target.style.height = e.target.scrollHeight + 'px';
        });
    }
});

HTML это просто, просто поместите атрибут v-resizable в textarea

<textarea v-resizable></textarea>

Особая благодарность AniMir! Я использую его входной обработчик событий.

Ответ 6

Используйте Bootstrap, он имеет классес, который включает в себя класс, который автоматически увеличивает высоту текстовой области в соответствии с текстом в ней