Работая над юзабилити сайта иногда приходит мысль, было бы неплохо увеличивать поле 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 id="comment" cols="50" rows="5" class="js-elasticArea" placeholder="Ваш отзыв" required></textarea>
Кстати, посмотреть пример работы данного кода Вы можете на моём сайте. Перейдите на страницу контакты или нажмите кнопку «Заказать дизайн» внизу справа и попробуйте ввести любое количество текста в textarea и увидите, как высота поля будет подстраиваться автоматически.
В поле textarea добавления комментариев, расположенной ниже тоже работает данный JS.