Растягивание Textarea в зависимости от количества текста

Работая над юзабилити сайта иногда приходит мысль, было бы неплохо увеличивать поле Textarea по высоте в зависимости от его заполненности.

Ниже представленный код как раз реализует эту возможность на Вашем сайте. Думаю не стоит упоминать, что jQuery уже должен быть установлен на Вашем проекте.

jQuery(document).ready(function ($){
// Start JS
  function elasticArea() {
    $('.js-elasticArea').each(function(index, element) {
       var elasticElement = element,
          $elasticElement = $(element),
          initialHeight = initialHeight || $elasticElement.height(),
          delta = parseInt( $elasticElement.css('paddingBottom') ) + parseInt( $elasticElement.css('paddingTop') ) || 0,
          resize = function() {
            $elasticElement.height(initialHeight);
            $elasticElement.height( elasticElement.scrollHeight - delta );
        };
      $elasticElement.on('input change keyup', resize);
      resize();
    });
  };
elasticArea();
// END JS
});

Класс js-elasticArea условный (вы можете менять его на любой свой) должен быть назначение для Textarea.

<textarea class="js-elasticArea"></textarea>

Кстати, посмотреть пример работы данного кода Вы можете на моём сайте. Перейдите на страницу контакты или нажмите кнопку «Заказать дизайн» внизу справа и попробуйте ввести любое количество текста в textarea и увидите, как высота поля будет подстраиваться автоматически.

В поле textarea добавления комментариев, расположенной ниже тоже работает данный JS.

ВКонтакте
Facebook
WhatsApp
Telegram
Автор статьи
Выгодный хостинг
Хостинг Beget

Выгодная партнёрская программа! Верните на свой счёт 20% с любой суммы от оплаты хостинга Beget!

Новое в блоге

Смотрите также

Мессенджеры

Написать сообщение

Отправлено!

Мы свяжемся с вами в ближайшее время.