Textarea height 100 javascript

Автоматическое растягивание textarea на javascript и jQuery

Очень удобно, когда поле для ввода текста растягивается в высоту по мере ввода текста. Для этого в современных бразуерах есть возможность растянуть поле. А в этой заметке мы поговорим о том, как сделать так, чтобы поле textarea растягивалось автоматически когда текста в нем больше чем оно может поместить.

Вариант 1: авто-растягивания textarea (на чистом javascript)

Пожалуй это лучшее решение, поэтому это первый вариант.

А это прямая ссылка на сам javascript код, который нужно подключить к html: https://github.com/jackmoore/autosize/blob/master/src/autosize.js

Установка проста: подключаете файл скрипта с помощью wp_enqueue_script(). Затем подключаете растягивание к элементу textarea одним из следующих вариантов:

// список элементов autosize( document.querySelectorAll('textarea') ); // один элемент autosize( document.querySelector('textarea') ); // jQuery элементы autosize( $('textarea') );

Chrome	Firefox	IE	Safari	iOS Safari	Android	Opera Mini
yes	yes	9	yes	yes	4	?

Вариант 2: авто-растягивания textarea (jQuery плагин)

Если у вас на сайте установлена библиотека jQuery, то рекомендую хороший плагин для автоматического растягивания textarea.

Поделюсь сразу сжатой версией кода плагина:

/* * jQuery autoResize (textarea auto-resizer) * @copyright James Padolsey http://james.padolsey.com * @version 1.04.1 (kama fix) */ (function(b),animate:!0,animateDuration:150,animateCallback:function()<>,extraSpace:20,limit:1E3>,f);this.filter("textarea").each(function()),f=d.height(),g=function();b.each(["height","width","lineHeight","textDecoration","letterSpacing"],function(b,a));return d.clone().removeAttr("id").removeAttr("name").css().css(c).attr("tabIndex","-1").insertBefore(d)>(),h=null,e=function()=a.limit?b(this).css("overflow-y",""):(a.onResize.call(this),a.animate&&"block"===d.css("display")?e.stop().animate(,a.animateDuration,a.animateCallback):e.height(c)))>;d.unbind(".dynSiz").bind("keyup.dynSiz",e).bind("keydown.dynSiz",e).bind("change.dynSiz",e)>);return this>>)(jQuery); // инициализация jQuery(function()< jQuery('textarea').autoResize(); >);

После установки этого кода, все textarea должны автоматически растягиваться.

Во время тестирования выяснил, что у textarea обязательно должно быть установлено css свойство display:block , иначе никакая анимация в плагине не работала (браузер chrome). Поэтому добавил в плагин пару строк кода, чтобы он сам устанавливал это свойство. Также, в некоторых браузерах есть возможность изменять размер поля вручную (в углу треугольничек), плагин эту возможность зачем-то убирал, я её вернул. Поэтому в заголовке @version 1.04.1 (kama fix)

Несжатая версия кода плагина:

/* * jQuery autoResize (textarea auto-resizer) * @copyright James Padolsey http://james.padolsey.com * @version 1.04.1 (kama fix) */ (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(), // 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(, 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; >; >)(jQuery);

Настройка плагина

Во время инициализации плагину можно установить некоторые параметры.

1. Уберем отступ снизу, по умолчанию он равен 20 пикселей:

2. Вешаем действия на события в момент ресайза и после него — настройки onResize и animateCallback:

jQuery('textarea').autoResize(< // Во время ресайза: onResize : function() < jQuery(this).css(< color:'#666', background:'#eee' >); >, // После ресайза: animateCallback : function() < jQuery(this).css(< color:'#222', background:'#fff' >); > >);

Все настройки

onResize(функция) Функция вызывается в момент изменения размера textarea. Передает объект textarea, т.е. в функции «this» будет рабочий textarea. animate(логический) Включена ли анимация изменения высоты. true — включена.
По умолчанию: true animateDuration(число) Время, которое занимает анимация в миллисекундах.
По умолчанию: 150 animateCallback(функция) Вызывается при окончании анимации. extraSpace(число) Отступ у textarea снизу в пикселях.
По умолчанию: 20 limit(число) Максимальная высота textarea в пикселях. Выше появится скролл.
По умолчанию: 1000

Вариант 3: авто-растягивания textarea (мой старый скрипт)

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

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

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

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

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

Очередной новый вариант, от 16 декабря 2013 года. Подправил код, исправил баг — код был написан немного не корректно и мог нагружать компьютер. Теперь этого нет.

/** * Скрипт для автоматического растягивания поля (Textarea) по вертикали. * * Для работы скрипта высота textarea не должна быть определена жёстко, т.е. * НЕ должно быть определено CSS свойство height. Вместо height можно * использовать min-height:200px; или лучше задать высоту через rows=''. * Также, можно ограничить максимальную высоту растяжки * через CSS свойством max-height:800px; * * Автор: Тимур Камаев - http://wp-kama.ru * Версия 4.0 */ // настройки var krVar = < // id атрибут тега textarea textareaId: 'comment', // время пересчета (1000=1сек). repeat: 1000, // коэффициент. Увеличите, если появляется прокрутка. cof: 40, >var KR = < timeout:0, textarea: document.getElementById( krVar.textareaId ), init: function()< if( ! KR.textarea ) return; KR.textarea.onfocus = KR.doit; KR.textarea.onblur = KR.stop; >, doit: function()< // устанавливаем нужное количество строк KR.textarea.rows = KR.countLines( KR.textarea.value ); clearTimeout( KR.timeout ); KR.timeout = setTimeout( function()< KR.doit(); >, krVar.repeat ); >, stop: function()< clearTimeout( KR.timeout ); >, //функция подсчета строк countLines: function( strtocount ) < var hard_lines = 0; var str = strtocount.split("\n"); hard_lines = str.length; var tx = KR.textarea; var letter_width = tx.clientHeight / tx.rows * krVar.cof / 100; // приблизительная ширина одной буквы в пикселях var chars_in_line = tx.clientWidth / letter_width; //сколько букв в строке var lines = 0; var temp = 0; // hard_lines-1 = количество элементов в массиве for( i=0; i 0 ) lines += temp; > return lines + hard_lines; > > if( window.addEventListener ) window.addEventListener( "load", KR.init, false ); else if( window.attachEvent ) window.attachEvent( "onload", KR.init );

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

1. Скопируйте вышеописанный код в любой уже имеющийся в шаблоне javascript файл;
2. Установите полю textarea CSS свойство min-height ( как это сделать см. ниже );
3. (необязательно) Если не хотите, чтобы поле тянулось до бесконечности установите ему CSS свойство max-height;

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

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

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

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

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

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

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

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

#commentform textarea #respond textarea #comment textarea#comment

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

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

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

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

До этого из: javascript

До этого из: Комментарии (comments)

Источник

How to Set the Size of the Element

There are two ways of setting the size of the HTML element. You can use HTML or CSS.

In HTML, you can use the cols and rows attributes. Let’s see this solution in use.

Example of setting the textarea size with HTML:

html> html> head> title>Title of the document title> head> body> form action="/form/submit" method="post"> textarea name="textarea" rows="5" cols="40">Write something here textarea> br> input type="submit" name="submitInfo" value="Submit"> form> body> html>

Result

In CSS, you need to use the width and height properties for the element.

Example of setting the textarea size with CSS:

html> html> head> title>Title of the document title> style> textarea < width: 250px; height: 100px; > style> head> body> form action="/form/submit" method="post"> textarea> textarea> br> input type="submit" name="submitInfo" value="Submit"> form> body> html>

How to make a textarea in HTML the same size as its contents?

To make a textarea in HTML the same size as its contents, you can use JavaScript to adjust the height of the textarea dynamically based on its content. Here’s an example of how to do it using jQuery:

html> html> head> title>Resizable Textarea title> script src="https://code.jquery.com/jquery-3.6.0.min.js"> script> style> textarea < min-height: 50px; padding: 10px; font-size: 16px; line-height: 1.5; resize: none; /* disable resizing */ > style> head> body> textarea id="myTextarea"> textarea> script> $(document).ready(function ( ) < $("#myTextarea").on("input", function ( ) < this.style.height = "auto"; this.style.height = this.scrollHeight + 10 + "px"; >); >); script> body> html>

In this example, we first define some CSS styles for the textarea to set its minimum height, padding, font size, line height, and to disable resizing. Then, we use jQuery to attach an event handler to the textarea’s input event. This event fires whenever the textarea’s content changes.

Inside the event handler, we first set the textarea’s height to «auto» to reset it to its default height. Then, we set its height to the scroll height (which includes the content height and any padding or borders) plus an additional 10 pixels of padding. This ensures that the textarea’s height is always large enough to fit its content.

By doing this, the textarea will dynamically adjust its height to match the height of its content as the user types or pastes into it.

How to set a fixed height and width for a textarea element in HTML?

You can set a fixed height and width for a textarea element in HTML by using the rows and cols attributes. The rows attribute sets the number of visible text lines in the textarea, while the cols attribute sets the number of visible characters per line.

To disable the resizing capability of the textarea, you can use the resize property in CSS and set it to none .

Here’s an example of how to set a fixed height and width for a textarea element:

html> html> head> title>Resizable Textarea title> head> body> textarea rows="10" cols="50" style="resize: none;"> textarea> body> html>

In this example, the textarea has a fixed height of 10 rows and a fixed width of 50 characters per row. The resize property is set to none to disable resizing.

Источник