Автоматичне розтягування поля (textarea) коментаря

Створив дід поле textarea і задав йому певну висоту, а так само id=’comment’ , а потім і каже, – “напишу я перший коментар, так і зробив”. Коментар зростав і поширювався, великий і красивий і врешті-решт став більшим ніж текстобласті. Вирішив дід витягнути текста: тягне-потягне, витягти не може. Покликав дід бабусю: тягнуть-потягнуть, витягнути не можуть. Покликали вони внучку, а потім і жучку – false! Вже зневірившись, покликав дід програміста, який написав простенький javascript і не просто витягнув textarea, а ще зробив так, щоб поле саме витягувалося при кожному великому та красивому коментарі.

Така ось ідіотська метафора чомусь спала мені на думку, коли я почав писати цей пост. А тепер, поясню нормально

Всі ви, напевно, бачили форми коментаря, які можна розтягувати (тягнуться вниз). Мені така практика здається дуже зручною, якщо пишеш великий коментар і він не міститься у форму, то з’являється скролінг, особливо незручно, мені це здалося, коли в коментар вставляєш якісь коди. Так, відповідаючи на один із коментарів на цьому блозі я задався метою зробити поле куди пишеться коментар, що розтягується у висоту, при цьому щоб воно тягнулося автоматично, якщо текст не поміщається в поле.

Рішенням став такий javascript, автором якого є web-технолог :

function flexibleTextarea(){
	var _txt = document.getElementById('comment'); // тут comment - це ідентифікатор поля, яке розтягуватиметься.
	var _minRows = 7; // Мінімальна кількість рядків (висота поля)

	if (_txt) {
		// функція розрахунку рядків
		function setRows() {
			_txt.rows = _minRows; // мінімальна кількість рядків
			// цикл перевірки місткості контенту
			do {
				if (_txt.clientHeight! = _txt.scrollHeight) _txt.rows += 1;
			} while (_txt.clientHeight < _txt.scrollHeight);
		}
		setRows();
		_txt.rows = _minRows;

		// перерахунок рядків залежно від набраного контенту
		_txt.onkeyup = function(){
			setRows();
		}
	}
}
if (window.addEventListener)
	window.addEventListener("load", flexibleTextarea, false);
else if (window.attachEvent)
	window.attachEvent("onload", flexibleTextarea);

Встановлення скрипту

Щоб підключити скрипт, потрібно скопіювати його в якийсь js файл вашого сайту або створити окремий, наприклад, myjs.js файл (скопіювати туди код) і підключити його в шаблоні так (підключається в head частину):

<script type='text/javascript' src='http://example.com/<шлях до створеного файлу>/myjs.js'></script>

Але краще все ж таки впровадити код в який-небудь вже наявний js файл – економія одного запиту до сервера ніколи не буде зайвою.

Налаштування скрипту

Можливо, потрібно буде налаштувати параметр _minRows – це висота поля, куди вводиться коментар.
Також якщо раптом ідентифікатор поля коментаря у вас відрізняється від comment (це стандартний id у WordPress), то змініть його в цьому рядку:

var _txt = document.getElementById('comment')

Приклад роботи цього скрипту можете спостерігати на цьому блозі у формі коментування.