WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

Автоматическое растягивание поля (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://site.ru/<путь до созданного файла>/myjs.js'></script>

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

Настройка скрипта

Возможно нужно будет настроить параметр _minRows - это высота поля, куда вводится комментарий.
Также если вдруг идентификатор поля комментария у вас отличается от comment (это стандартный id в WordPress), то измените его в этой строчке:

var _txt = document.getElementById('comment')

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

4 коммента
  • Twin cайт: sitestroyblog.ru

    Очень полезный скриптик, спасибо.
    А вы на всех браузерах его пытали? В Google Chrome всё отлично работает, а вот в IE8 кривовато - тормозит страшно при расширении поля и если оно уже далеко вниз ушло, то при ещё большем расширении курсор к началу формы комментирования переносится.

    Ответить8.4 лет назад #
    • Kama7144

      Да, действительно, скрипт недоделанный.

      Сегодня провел несколько часов в попытках починить его, выяснилось, что сделать это крайне не просто. Я бы даже сказал невозможно, если учитывать что нужна кросбраузерность. В нем базовый параметр (на котором строится сам скрипт) scrollHeight имеет разное значение в разных браузерах.

      Уже сделал скрипт, который работает по другому принципу, только что доделал. Скоро выложу в виде очередной статьи.

      П.С. Этим скриптом пользоваться не особо советую smile

      Ответить8.4 лет назад #
  • Артемий

    Спасибо большое!!!
    Все работает крссбраузерно.
    В ИЕ немного неправильно растягивает - всегда чуть разный размер.
    Но в целом - это самое лучшее решения что я нашел в интернете без использования библиотек.

    Спасибо!!!

    Ответить7.4 лет назад #
    • Kama7144

      Приятно слышать такие отзывы. Меня тоже устраивает этот вариант, если отбросить всякие библиотеки.

      Ответить7.4 лет назад #
Здравствуйте, !     Войти . Зарегистрироваться