Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Скрипт для авторастяжки поля комментирования

Изменение размера текстовой области в зависимости от длины содержимого

Очень простое и элегантное решение. Вы можете получить высоту содержимого, установив значение в 1px, а затем прочитав свойство scrollHeight:

<script>
function resizeTextArea(element) {
    element.style.height = "1px";
    element.style.height = (25+element.scrollHeight)+"px";
}
</script>
<textarea onkeyup="resizeTextArea(this)" style="overflow:hidden"></textarea>

Здесь можно протестировать этот приме скрипта:

Классическое решение подбора высоты textarea


Исходный код этого примера:
<form method="post" action="">
	<label for="ta">Вводите сюда текст. Новые строки будут добавляться автоматически:</label><br>
	<textarea id="ta" rows="5" cols="50"></textarea>
</form>

<script>
function countLines(strtocount, cols) {
	var hard_lines = 1;
	var last = 0;
	while ( true ) {
		last = strtocount.indexOf("\n", last+1);
		hard_lines ++;
		/* if ( hard_lines == 35) break; */
		if ( last == -1 ) break;
		}
	var soft_lines = Math.ceil(strtocount.length / (cols-1));
	var hard = eval("hard_lines " + unescape("%3e") + "soft_lines;");
	if ( hard ) soft_lines = hard_lines;
	return soft_lines;
}

function cleanForm() {
	var the_form = document.getElementById('ta');
	the_form.rows = countLines(the_form.value,the_form.cols) +1;
	setTimeout("cleanForm();", 500);
}
cleanForm();
</script>

.