Работая над юзабилити сайта иногда приходит мысль, было бы неплохо увеличивать поле 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.
