СКРИПТЫ
ТЕГИ:
php (325)
js (242)
html (146)
css (130)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (28)
fonts (26)
link (26)
Показать еще :
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
svg (18)
input (18)
hosting (18)
php date (17)
html book (16)
php time (16)
board (16)
color (15)
js url (14)
img (14)
js events (14)
js time (14)
info (13)
select (13)
osclass (13)
htaccess (13)
notepad (13)
знак (12)
php path (12)
keyboard (12)
php img (12)
download (12)
table (12)
dw block (12)
jsphp (11)
form (11)
icon (11)
yandex (10)
mouse (10)
js delete (10)
keyframes (10)
hover (9)
dosite (8)
browser (7)
cookie (7)
comment (7)
php url (7)
php get (6)
click (6)
mysql (6)
canvas (6)
list (6)
iframe (6)
js math (5)
reg.ru (5)
adminka (5)
mb (5)
heading (5)
tag a (5)
chart (5)
search (5)
ftp (5)
year (5)
js id (5)
value (5)
base64 (4)
day (4)
нок (4)
flags (4)
week (4)
xml (4)
scandir (4)
ssl (4)
bbcode (4)
php var (4)
games (4)
console (4)
js form (4)
vk (4)
pages (4)
submit (4)
month (4)
symbols (4)
task (4)
https (3)
js hash (3)
js post (3)
domen (3)
money (3)
vs code (3)
куб (3)
js img (3)
ucoz (3)
padding (3)
captcha (3)
numbers (3)
line (3)
tag hr (2)
qr kod (2)
youtube (2)
video (2)
рся (2)
sitemap (2)
counter (2)
details (2)
prompt (2)
typeof (2)
google (2)
height (2)
arrows (2)
seo (2)
js vars (2)
smile (1)
scroll (1)
speed (1)
нод (1)
archive (1)
header (1)
windows (1)
rutube (1)
jino (1)
cursor (1)

Растягиваемый по высоте 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"

  1. Автоматически растягиваемая высота 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(){ скрипт }


  2. Автоматическая высота 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


  3. Автоматическая высота 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

    скачать


  4. 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 с тестовым файлом

    скачать


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

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

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

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

    Результат:

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

Не благодарите, но ссылкой можете поделиться!
Временная ссылка для быстрейшей индексации : список всех квадратных корней.
Теги :
textarea autosize
резиновый textarea autosize
vue textarea autosize
js textarea autosize
textarea автоматическая высота
автоматическое увеличение textarea
textarea автоматическое растягивание
автоматическое увеличение textarea по высоте
textarea высота
textarea автоматическая высота
textarea высота по содержимому
css textarea высота по содержимому
textarea высота текста
автоматическое увеличение textarea по высоте
textarea увеличение высоты по мере ввода
textarea на всю высоту блока
резиновый текстареа
автовысота у textarea
увеличение размера textarea в зависимости от текста css
Комментариев : 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 внутрь разрабатываемого модуля для таблицы, я не могу отследить из этого модуля события аккардион (могу, но будет некрасиво), при попытке отследить Изменения высоты таблицы (Через переменную) не могу подобрать такого события.

Буду рассчитывать на ответ.
ответить
ruweb dwweb.ru есть здесь:
Последние комментарии :
Марат :
15.08.2023 17:50
Значит в "maxv" сидит…
подробнее.
михаил :
15.08.2023 16:53
а если это сделано для диаграммы values / maxv)…
подробнее.
Марат :
17.07.2023 15:50
Спасибо за интересный вопрос! Посмотрите …
подробнее.
Александр :
17.07.2023 14:58
а как сделать чтобы при повторном клике значение value возвращалось к…
подробнее.
Марат :
30.06.2023 10:18
Спасибо за внимательность!
подробнее.
???? :
29.06.2023 15:37
Прямоугольник - это геометрическая фигура, у которой три угла…
подробнее.
Немного о ruweb.net!
Страница загружена за : 0.023421 секунд. Подробнее