Растягиваемый по высоте autosize textarea, автоматическая высота textarea, скрипты, примеры

Всё известные способы растягивать textarea при заполнении текста

1. Автоматически растягиваемая высота textarea -> javascript
   + пример + скачать скрипт
2. Автоматическая высота textarea по высоте по его id -> javascript
   + пример + скачать скрипт
3. Автоматическая высота textarea с использованием -> jQuery
   + пример + скачать скрипт
4. Autosize по высоте textarea при помощи библиотеки -> autosize.js
   + пример + скачать скрипт
5. Это не textarea, но это существует -> contenteditable="true"

Скопировать ссылку



Автоматически растягиваемая высота textarea javascript

Для иллюстрации работы данного скрипта, на чистом javascript, нам потребуется...

1). textarea - высота которого будет растягиваться в зависимости от содержимого:

<textarea cols="70" rows="3" placeholder ="введите несколько строк текста, чтобы проверить работу скрипта, который растягивает по высоте"></textarea>
2). Скрипт, который будет растягивать выше приведенный textarea по содержимому!


var tx = document.getElementsByTagName('textarea');//РАСТЯГИВАЕМ_textarea

for (var i = 0; i < tx.length; i++) {

tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');

tx[i].addEventListener("input", OnInput, false);

}

function OnInput() {

this.style.height = 'auto';

this.style.height = (this.scrollHeight) + 'px';//////console.log(this.scrollHeight);

}

Пример textarea который растягивается автоматически по содержанию на чистом javascript

Пример для данного скрипта, на отдельной странице


Скачать скрипт автоматического растягивания textarea по содержанию на чистом javascript

У нас есть отдельная страница, на которой мы складываем скрипты, которые могут быть выделены в отдельный архив...

Скачать скрипт автоматического растягивания textarea
Естественно

, что скрипт должен стоять после формы, если вы хотите его поставить выше, то его нужно обрамлять в:

window.onload = function(){ скрипт }
Скопировать ссылку



Автоматическая высота textarea по высоте с обращением к id

Для иллюстрации второго примера растягивания высоты поля textarea при наборе текста, нам опять потребуется поле textarea , но здесь скрипт будет обращаться к textarea по его id

1). Вставляем атрибут id="любое_слово"
<textarea id='любое_слово' cols="70" rows="3" placeholder="введите несколько строк текста, чтобы проверить работу скрипта, который растягивает по высоте"></textarea>
2). Внутри скрипта есть два вызова функции flexibleTextarea - их может быть сколько угодно... внутрь вставляем тот ид, который у вас в textarea :

flexibleTextarea('любое_слово');

Скрипт, который растягивает высоту textarea по содержимому

function flexibleTextarea(b) {

var a = document.getElementById(b) || b;

if (a) {

a.style.overflow = "hidden";

var e = a.rows = a.rows > 0 ? a.rows : 2;

b = a.cols = a.cols > 0 ? a.cols : 20;

var g = RegExp("([^\r\n]{" + b + "})([^\r\n])"),

f = RegExp("[^\n]{" + b + "}\n?$|[^\n]{0," + b + "}\n");

a.onkeyup = a.onkeydown = function () {

a.value = a.value.replace(g, "$1\r\n$2");

for (var c = 0, d = a.value; d.search(f) >= 0;) {

c++;

d = d.replace(f, "")

}

c += 2;

if (c < e) c = e;

a.rows = c

}

}

};

window.onload = function(){

flexibleTextarea('любое_слово');
flexibleTextarea('ещё');


}

Поскольку, здесь вызов функции обернут в onload , то данный скрипт можно располагать, где захочется...


Пример автоматическое изменение высоты textarea по высоте с обращением к id

И для данного примера тоже сделали отдельный пример, на отдельной странице!


Скачать скрипт автоматическое изменение высоты textarea по высоте с обращением к id

Скачать скрипт автоматического растягивания textarea

Скопировать ссылку



Автоматическая высота textarea с использованием jQuery

1). Самым первым вам понадобится подключить jquery
2). Опять повторяемый тестовый textarea
3). Скрипт, который растянет очередной textarea при вводе очередного текста


Скрипт - автоматическая высота textarea с использованием jQuery

$(document).on("input", "textarea", function () {

$(this).outerHeight(38).outerHeight(this.scrollHeight);

});

Для данного скрипта не имеет значение расположение! Не нужно указывать дополнительных параметров!

Естественно!

Что скрипт, должен стоять после подключения библиотеки.

Пример растягивания textarea по высоте с использованием jQuery

Соберем всё перечисленное вместе и поместим на тестовую страницу


Скачать скрипт автоматическая высота textarea с jQuery

скачать

Скопировать ссылку



Autosize по высоте textarea при помощи библиотеки autosize.js

Автоматическая высота textareaс использованием autosize.js, библиотеку можно скачать 1). здесь -> autosize.js., либо 2). она(библиотека) будет внутри скрипта , в виде файла, 2.1). прямо вовнутрь тестового файла поместим саму библиотеку! В примере подключение через файл будет заэкранировано.


Включение подключение библиотеки autosize.js

1). Вы должны были скачать, либо не скачать скрипт autosize.js, он будет в архиве ниже.
2). Подключение как обычное подключение скрипта...

<script src="https://dwweb.ru/__a-data/__all_for_scripts/__examples/js/autosize_textarea/autosize.min.js"></script>
Можете посмотреть на него вживую
2.1). Повторяюсь, в тестовом файле всю библиотеку скопировал и вставил в тестовый файл, а верхнее подключение заэкранировал.
3). Для работы autosize.js вам нужно активировать autosize:

<script>window.onload = function(){autosize(document.querySelectorAll('textarea')); } </script>

Пример автоматической высоты textarea при помощи библиотеки autosize.

Собираем все вместе и получаем тестовую страницу с autosize.js


Скачать библиотеку Autosize.js с тестовым файлом

скачать

Скопировать ссылку



Contenteditable - как автоматическая высота блока

Это не касается поля ввода textarea, но отдельную страницу, пока не собираюсь делать страницу, а сюда точно в тему.

Как работает Contenteditable !?

Во внутрь тега помещаем атрибут contenteditable со значением true

<div contenteditable="true">Здесь текст в div с атрибутом <red>contenteditable="true"</red> Поставьте сюда мышку и попробуйте набрать текст</div>

Результат:

Здесь текст в div с атрибутом contenteditable="true" Поставьте сюда мышку и попробуйте набрать текст

Комментариев : 3 COMMENTS+   BBcode

Подписаться + =

---

скопировать ссылку

26/08/2020 08:02 Павел

Здравствуйте. Пишу плагин для таблицы, в таблице много textarea, плагин и таблица расположены в скрытой вкладке аккардиона, при раскрытии аккардиона не могу запустить скрипт изменения высоты (displey:none) а метод на основе Jqueru я понял, не меняет высоту если мой плагин и таблица в скрытом родителе, как тут быть. Искал событие реагирующее на изменение высоты, не нашёл, аккордеон самописный, как вариант в самом аккордеоне при открытии добавлять проверку всех textsrea, но этот вариант делает мой плагин для таблицы не автономным, дайте совет.

ответить

скопировать ссылку

26/08/2020 04:22 Марат Павел

Столько написали и ничего не понятно!
У вас есть textarea со свойством "display: none;" - непонятно...
зачем textarea скрытый и зачем для этого изменять его высоту...
х.з... зачем, ну ладно... примените "opacity: 0;"

ответить

скопировать ссылку

26/08/2020 05:57 Павел Марат

textarea В таблице, а таблица в родительском div, а этот див является частью аккордеона, сам textarea без displey: none, но когда разворачивается аккардион, приходится либо как-то отслеживать высоту таблицы в которой находится textarea (в модуле для таблицы) либо в функционал аккордеона закладывать пересчёт высоты при клике на вкладку Аккардиона

А статьи я читаю внимательно, и при закладывании функционала пересчета (основанном на Jquery) высоты в функционал аккардиона все работает, однако при попытке запихнуть этот функционал на jqueru внутрь разрабатываемого модуля для таблицы, я не могу отследить из этого модуля события аккардион (могу, но будет некрасиво), при попытке отследить Изменения высоты таблицы (Через переменную) не могу подобрать такого события.

Буду рассчитывать на ответ.

ответить