Авто добавление высоты при вводе в TEXTAREA / Формы / Сниппеты Bootstrap

Авто добавление высоты при вводе в TEXTAREA

HTML готовый демо пример автодобавления высоты полю textarea при вводе в него, текстареа автоматически добавляет высоту, показано на Bootstrap.

* При возникающих проблемах со скроллингом удалите значение стилей (overflow-y: hidden;), а в скрипте строку (element.style.overflowY = 'hidden';).

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Формы

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 304

Количество символов:

Посмотрели: 2927 раз

Помощь: установка & настройка

Прикреплён файл №1: /_sf/3/304.html

Прокомментировали: 0 раз

Рейтинг: 3.5 / 5 - 12 голосов

Тип лицензии: CC BY 4.0

Авторство: http://u.to/Vx1LDQ

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, поле, height, сниппет, Bootstrap, высота, html, бутстрап, textarea, текстареа

Поделился: IZOTOP

Добавлено: 2015-12-12 в 10:17

Метка: 1582101797

⇄ ⇅

</div>

</div></div>

$element = $(element);

console.log('height():', $element.height());
 console.log('getComputedStyle height:', parseInt(getComputedStyle(element).height, 10));
 console.log('scrollHeight:', element.scrollHeight);

element.style.overflowY = 'hidden';

var paddingTopBottom = $element.innerHeight() - $element.height();
 console.log('paddingTopBottom:', paddingTopBottom);
 console.log('scrollHeight - paddingTopBottom:', element.scrollHeight - paddingTopBottom);

element.style.height = 'auto';

$element.height(element.scrollHeight - paddingTopBottom);
 }

$('.auto-size').each(function() {
 autoSize(this);
 }).on('input', function() {
 autoSize(this);
 });
 </script>

BootstrapTema

Авто добавление высоты при вводе в TEXTAREA

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0