Растягивание 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-elas­ti­cArea условный (вы можете менять его на любой свой) должен быть назначение для Textarea.

<textarea id="comment" cols="50" rows="5" class="js-elasticArea" placeholder="Ваш отзыв" required></textarea>

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

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