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

Так сложилось, что первая версия скрипта для автоматического растягивания поля комментария в WordPress оказалась немного бракованной . Когда я её тестировал почему то не заметил бага. Баг заключался в том, что при сильном растягивании поля, экран начинал прыгать наверх при нажатии на любую клавишу, в результате большой комментарий оставить вообще не представлялось возможным, а это непростительный баг. Кроме этого, в ИЕ8 скрипт немного или сильно тормозил (зависит от компа и других подключенных скриптов).

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

Серфинг вывел меня на решение, которое мне показалось очень даже приемлемым с точки зрения удобства. Посмотреть на это решение можете в этой демке (может кому пригодится). Немного поковырявшись со скриптом, я понял что сделать простую интеграцию в WordPress не получится (придется дополнять форму комментирования, добавлять CSS и конечно подключать сам Скрипт), а мне хотелось именно этого, чтобы просто вставил скрипт и готово. Такое сомнительное юзабилити все же не стоит больших усилий.

Поэтому я пошел сёрфить дальше и нашел интересную функцию подсчета строк, которую пришлось доделывать. Но результат меня вполне устроил. Кстати, результат можете посмотреть на этом блоге или взгляните на эту ДЕМО версию.

Из плюсов этого варианта изменения размеров поля комментирования, можно выделить:

• простая интеграция в шаблон;
• автоматическое растягивание поля, т.е. без лишних телодвижений;
• нет тормозов в ИЕ.

А вот собственно скрипт, который у меня получился:

Новый вариант скрипта (от 9 марта 2011) (старый см. ниже). Подсчет высоты принципиально другой, придуман и реализован мной лично. Скрипт кросс-браузерный и не грузит, в отличии от аналогов, комп.

/** Скрипт для автоматического растягивания поля (Textarea) по вертикали (вариант 3). Автор: wp-kama.ru
-----------------------------------------------------------------------------
# Для работы скрипта высота textarea не должна быть определена жёстко (НЕ должно быть определено CSS свойство height),
# вместо height можно использовать min-height:200px; или лучше задать высоту через rows=''.
# Также, можно ограничить максимальную высоту растяжки через CSS свойством max-height:800px;
*/
function _resizer(){
	var textarea = 'comment'; // id атрибут тега textarea
	var repeat = 500; // время пересчета (1000=1сек).
	var cof = 55; // коэффициент. Увеличте, если появляеться прокрутка.

	textarea = document.getElementById(textarea);
	textarea.onfocus = do_resize;
	textarea.onblur = stop_resize;

	//функция подсчета строк
	function countLines(strtocount) {
		var hard_lines = 0;
		var str = strtocount.split("\n");
		hard_lines = str.length;

		var letter_width = textarea.clientHeight/textarea.rows*cof/100; // приблизительная ширина одной буквы в пикселях
		var chars_in_line = textarea.clientWidth/letter_width; //сколько букв в строке

		var lines = 0;
		var temp = 0;
		for(i=0; i<=(hard_lines-1); i++){ //hard_lines-1 = количество элементов в массиве
			temp = str[i].length / chars_in_line;
			if(temp>0) lines += temp;
		}	

		return lines+hard_lines;
	}
	// Ресайз поля
	function do_resize() {
		if(!textarea){ return; }
		var new_rows = countLines(textarea.value);
		if( textarea.rows!=new_rows+1 ) textarea.rows = new_rows;//чтобы не прыгало
		timeout_resize = setTimeout(function(){ do_resize(); }, repeat);
	}

	function stop_resize(){ clearTimeout(timeout_resize); }
}

if (window.addEventListener)
	window.addEventListener("load", _resizer, false);
else if (window.attachEvent)
	window.attachEvent("onload", _resizer);

Старый вариант функции (считал высоту не точно. Посмотреть СТАРУЮ ДЕМО версию):

/** Скрипт для автоматического растягивания поля (Textarea) по вертикали
-----------------------------------------------------------------------------
Для работы скрипта высота textarea не должна быть определена жёстко (НЕ должен быть определен CSS аргумент height),
вместо height можно использовать min-height или просто задать высоту через rows=''.
Также, можно ограничить максимальную высоту растяжки через CSS аргумент max-height
*/
function _resizer(){
	var textareaID = 'comment'; // Иденнтификатор поля textarea
	var repeat = 500; 			// интервал пересчета строк (1000 = 1 секунда)

	var the_form = document.getElementById(textareaID);
	the_form.onfocus = cleanForm;

	function countLines(strtocount, cols) { //функция подсчета строк
		var hard_lines = 0;
		var last = 0;
		while ( true ) {
			last = strtocount.indexOf("\n", last+1);
			hard_lines ++;
			if ( last == -1 ) break;
			}
		var soft_lines = Math.ceil(strtocount.length / (cols-1));
		var hard = eval("hard_lines " + unescape(">") + "soft_lines;");
		if ( hard ) soft_lines = hard_lines;
		return soft_lines;
	}
	function cleanForm() { //инициализация подсчета строк
		if(the_form){
			the_form.rows = countLines(the_form.value,the_form.cols) +1;
			setTimeout(function(){ cleanForm(); }, repeat);
		}
	}
}

if (window.addEventListener)
	window.addEventListener("load", _resizer, false);
else if (window.attachEvent)
	window.attachEvent("onload", _resizer);

Установка скрипта

1. Скопируйте вышеописанный код в любой уже имеющийся в шаблоне javascript файл;

2. Установите полю textarea CSS свойство min-height (как это сделать см. ниже);

3. (необязательно) Если не хотите чтобы поле тянулось до бесконечности установите ему CSS свойство max-height;

Как вставить скрипт прямо в файл темы:

Если js файла у вас в шаблоне нет, то можно его создать, скопировать туда код, а затем подключить файл к шаблону.

Или можно просто подключить выше написанный код в ваш файл шаблона single.php, вставив такую конструкцию в файл:

<script type="text/javascript">/* <![CDATA[ */

Здесь код

/* ]]> */</script>

Как установить полю textarea css свойство min-height

Вариант 1: Откройте файл comments.php найдите там HTML тег textarea и добавьте к нему style='min-height:200px; max-height:700px;'. На вид примерно так:

   <textarea style="min-height:200px; max-height:700px;" rows="58" name="comment" id="comment" tabindex="4"></textarea>

max-height:700px; можно не добавлять - это максимальная длинна до которой будет растягиваться поле.

Вариант 2: Найдите в вашем файле стилей (style.css) класс, который отвечает за поле textarea и добавьте к нему CSS свойство min-height:200px;. Если там присутствует свойство height:XXXpx, то его нужно удалить.

Несколько вариантов как может называться класс который отвечает за поле:
#commentform textarea
#respond textarea
#comment
textarea#comment

Тех. подробности: как работает скрипт

Принцип работы кода заключается в следующем: когда курсор попадает в поле комментирования включается периодический подсчет строк (каждые пол секунды), когда курсор выходит из поля, подсчет строк останавливается. Строки считаются путем суммы количества явных переносов строки (\n) и вычисление неявных переносов (когда строка переводится на новую из-за нехватки ширины поля, над этим моментом пришлось биться долго и муторно).

Принципиальная разница с прошлым вариантом в том, что применяется другая технология подсчета строк и строки считаются не по нажатию клавиши а спустя какое-то время, в нашем случае 500 миллисекунд (пол секунды). Интервал можно увеличить, если наблюдаются тормоза. В вариантах, когда подсчет высоты вешается на нажатие клавиши, везде наблюдаются тормоза, особенно на слабых компах и при быстром печатание.

Если возникнут вопросы задавайте в комментариях!

Вариант авторесайза textarea на jQuery

Для тех у кого установлена библиотека jQuery есть такой вариант авторесайза. Глюков в работе я не заметил, тоже кросс-браузерный. Подробнее о варианте на jQuery смотрите здесь.

А если коротко, то используйте этот код:

/*
 * jQuery autoResize (textarea auto-resizer)
 * @copyright James Padolsey http://james.padolsey.com
 * @version 1.04
 */

(function($){

    $.fn.autoResize = function(options) {

        // Just some abstracted details,
        // to make plugin users happy:
        var settings = $.extend({
            onResize : function(){

			},
            animate : true,
            animateDuration : 150,
            animateCallback : function(){},
            extraSpace : 20,
            limit: 1000
        }, options);

        // Only textarea's auto-resize:
        this.filter('textarea').each(function(){

                // Get rid of scrollbars and disable WebKit resizing:
            var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),

                // Cache original height, for use later:
                origHeight = textarea.height(),

                // Need clone of textarea, hidden off screen:
                clone = (function(){

                    // Properties which may effect space taken up by chracters:
                    var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
                        propOb = {};

                    // Create object of styles to apply:
                    $.each(props, function(i, prop){
                        propOb[prop] = textarea.css(prop);
                    });

                    // Clone the actual textarea removing unique properties
                    // and insert before original textarea:
                    return textarea.clone().removeAttr('id').removeAttr('name').css({
                        position: 'absolute',
                        top: 0,
                        left: -9999
                    }).css(propOb).attr('tabIndex','-1').insertBefore(textarea);

                })(),
                lastScrollTop = null,
                updateSize = function() {
                    // Prepare the clone:
                    clone.height(0).val($(this).val()).scrollTop(10000);

                    // Find the height of text:
                    var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
                        toChange = $(this).add(clone);

                    // Don't do anything if scrollTip hasen't changed:
                    if (lastScrollTop === scrollTop) { return; }
                    lastScrollTop = scrollTop;

                    // Check for limit:
                    if ( scrollTop >= settings.limit ) {
                        $(this).css('overflow-y','');
                        return;
                    }
                    // Fire off callback:
                    settings.onResize.call(this);

                    // Either animate or directly apply height:
                   settings.animate && textarea.css('display') === 'block' ?
                        toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
                        : toChange.height(scrollTop);

                };

            // Bind namespaced handlers to appropriate events:
            textarea
                .unbind('.dynSiz')
                .bind('keyup.dynSiz', updateSize)
                .bind('keydown.dynSiz', updateSize)
                .bind('change.dynSiz', updateSize);

        });

        // Chain:
        return this;

    };

    /* инициализируем растягивание textarea */
$(function(){
	$('textarea').autoResize({
		extraSpace:0
	});
})

})(jQuery);

Вставьте этот код в имеющийся .js файл или создайте новый .js файл, скопируйте этот код туда и подключите его к сайту.

Код будет работать для всех textarea на сайте. Ручное изменение размеров в Chrome и Safary будет отключено.