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

Это решение я забраковал. Другое, лучшее решение находится здесь: Автоматическое растягивание поля (textarea) комментария (версия 2)

Создал дед поле textarea и задал ему определенную высоту, а так же id='comment', а затем и говорит, - "напишу-ка я первый комментарий, да так и сделал". Комментарий рос и ширился, большой и красивый и в итоге стал больше чем textarea. Решил дед вытянуть textarea: тянет-потянет, вытянуть не может. Позвал дед бабку: тянут-потянут, вытянуть не могут. Позвали они внучку, а потом и жучку - false! Уже отчаявшись, позвал дед программиста, который написал простенький javascript и не просто вытянул textarea, а еще сделал так, чтобы поле само вытягивалось при каждом большом и красивом комментарие. smile

Такая вот идиотская метафора почему-то пришла мне в голову, когда я начал писать этот пост. А теперь, объясню нормально smile

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

Решением стал такой 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')

Пример работы этого скрипта можете наблюдать на этом блоге в форме комментирования.

4 комментария
    Войти