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

textarea autosize . Нам нужна автоматическая высота textarea , т.е. чтобы textarea растягивался автоматически при заполнении. Как сделать растягиваемое поле textarea под содержание! Скрипты autosize textarea, все способы растянуть 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.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" Поставьте сюда мышку и попробуйте набрать текст