Как сделать текстовое поле в форме комментирования автоматически растягивающимся

Как сделать текстовое поле в форме комментирования автоматически растягивающимся | n-wp.ru
Пример использования java-скрипта для создания автоматически растягивающегося текстового поля, увеличивающего свою высоту в зависимости от количества вводимого в него текста.
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

Однако тут и появляется проблема, с которой сталкиваются если не все, то очень многие — при вводе слишком длинного текста высоты формы комментирования не достаточно, и появляется вертикальная полоса прокрутки. Согласитесь, что если вы пишите солидный такой комментарий, с кодами, форматированием, отступами, то вертикальная прокрутка все портит — приходится постоянно прокручивать текст вверх-вниз, чтобы посмотреть, что вы уже написали, некоторые абзацы не вмещаются, в общем, не совсем удобно комментировать получается.

Сколько копий сломали бойцы сайтостроительства об эту проблему, пытаясь решить ее с помощью CSS, и каждый раз решение не выглядело простым. Я тоже столкнулся с этой проблемой, и решил найти способ, доступный такому же чайнику. В итоге получилась очень простая комбинация из одного небольшого скрипта, который следит за указанным текстовым полем, и по мере заполнения автоматически растягивает его вертикально, добавляя новые строчки с таким расчетом, чтобы не возникало вертикальной полосы прокрутки и весь текст в поле оставался видимым.

Как сделатьтекстовую форму автоматически растягивающейся

Придание текстовой форме эластичности включает в себя два очень простых этапа. Действительно, на самом деле ничего сложного дальше не будет, так что смело можете приступать к модернизации, только удостоверьтесь, что в блоге подключены скрипты jQuery.

Оперделение текстового поля

Для начала нам нужно знать, какое текстовое поле растягивать. Обычно «резинизации» :) подвергается поле ввода текста комментария. Вот его-то id или class нужно узнать. Для этого откройте шаблон, отвечающий за форму комментирования (обычно это comments.php или comment-form.php) и найдите в нем этот элемент. Он легко находится — это texarea, и обычно его id=»comment».

Как сделать текстовую форму автоматически растягиващейся

Как видно, у этого поля textarea есть id=»comment» — он-то нам и нужен.

Подсказка: если найти в шаблоне код, отвечающий за отображение текстового поля формы комментирования, проблематично, то вы можете воспользоваться встроенными возможностями браузера для определенеия оформления элементов на просматриваемой странице. Мне нравятся средства разработчика в Internet Explorer, вызываемые клавишей F12 — выбрал указатель, подвел его к элементу на странице, и посмотрел его оформление.

Как сделать текстовую форму автоматически растягиващейся

Вставка скрипта

Теперь нам нужно внедрить jQuery-скрипт, который будет контролировать высоту текстового поля с id=»comment». Для начала нужно его скачать. Скрипт называется Elastic, его написал Jan Jarfalk.

Скачать jQuery скрипт Elastic

Скачайте файл и распакуйте его — вы получите jquery.elastic.source.js. Закиньте этот файл себе в папку с темой. Наверняка у вас есть в ней еще одна специальная папка для скриптов — вот туда и переписывайте. Я, чтобы не путаться, создаю во всех темах папку js, и кладу скрипты туда.

Подключить скрипт можно одной строчкой. Добавьте в файл header.php:

<script type="text/javascript" src="/js/jquery.elastic.source.js">

Скрипт подключен, осталось его связать с нашим текстовым полем. Помните его id? Напоминаю — в нашем примере id=»comment». Добавьте сразу после только что введенной строчки еще немного кода:
<

 highlight="4">  

  // 

Обратите внимание на строку 4 — в ней указывается id текстового поля. Вот и все — сохраните все изменения и наслаждайтесь результатом.

В принципе, этот скрипт можно прикручивать к любому текстовому полю, достаточно указать его id или class. Если это id=»comment», то в скрипте указываете #comment, если же это class="elastic", то в скрипте указываете .elastic. Дерзайте!

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий