22 Вересень 2013
1 166
Рубрика: уроки

Как менять размеры текстового блока по мере набора текста

Этот простой скрипт умеет менять высоту текстового блока по мере набора текста. Так, чтобы не появлялась полоса прокрутки, а набирать текст было удобно.

Если в небольшом текстовом поле набирать большой комментарий, появляется полоса прокрутки и пользоваться такой формой становится неудобно. С другой стороны, если поле сделать внушительных размеров, небольшие комментарии будут смотреться в ней странно.

Есть решение: скрипт, который будет динамически менять высоту textarea мере набора текста. Я написал его, используя только js, никаких jQuery и тому подобного подключать не нужно. Итак…

HTML+JS

Сначала создадим текстовый блок и назначим ему функцию, которая будет вызываться при любом редактировании текста в нем:

<textarea id="txt">
Вы не учли, что скалярное поле необходимо и достаточно!
</textarea>

Сама функция будет выглядеть так:

<script>
function resizeTextarea(resizeId) {
	var tArea = document.getElementById(resizeId);
	var chars = tArea.value.length;
	var width = tArea.clientWidth;
	var fontSize = window.getComputedStyle(tArea).fontSize.replace("px", "");
	var lines = Math.round(chars*(fontSize*2/3)/width);
	var height = Math.round((lines+4)*(fontSize));
	if (height > 50) {
		tArea.style.height = (height);
	}
}
</script>

Как это работает

Функция считаем количество символов в форме, высоту одного символа и количество символов в строке. Далее считается высота набранного текста, добавляются несколько свободных строк и в зависимости от этого меняется высота текстового блока. Минимальная высота установлена на 50 пикселей.

Демо и скачать

Тепер я хочу бачити коментарі 0