jQuery-скрипт для авторастяжки текстового поля textarea
Однажды я уже писал о таком скрипте, но он оказался не совершенен, и в результате я им так и не стал пользоваться. Однако задача найти подходящий скрипт для авторастяжки этого поля все-таки стояла передо мной.
И я нашел красивое решение, в виде jQuery-скрипта под названием jGrow. Проверял его в разных браузерах, в целом все нормально, заметил только один недочет – в Опере появляется горизонтальная прокрутка.
Размер самого скрипта совсем небольшой, выглядит вот так:
var $j = jQuery.noConflict();
$j.fn.jGrow = function(options) {
var opts = $j.extend({}, $j.fn.jGrow.defaults, options);
return this.each(function() {
$j(this).css({ overflow: "hidden" }).bind("keypress", function() {
$this = $j(this);
var o = $j.meta ? $j.extend({}, opts, $this.data()) : opts;
if(o.rows == 0 && (this.scrollHeight > this.clientHeight)) {
this.rows += 1;
} else if((this.rows <= o.rows) && (this.scrollHeight > this.clientHeight)) {
this.rows += 1;
} else if(o.rows != 0 && this.rows > o.rows) {
$this.css({ overflow: "auto" });
}
$this.html();
});
});
}
$j.fn.jGrow.defaults = { rows: 0 };
$j(document).ready(function() { $j("#comment").jGrow({ rows: 25 }); })
Здесь нам интересна в плане настроек лишь последняя строка, а, вернее, вот эта ее часть:
$j("#comment").jGrow({ rows: 25 });
#comment – это идентификатор поля textarea, к которому хотим прицепить скрипт.
rows: 25 – максимальное количество строк, до которых будет происходить авторастяжка. Если содержимое поля станет больше этого количества строк, то появляется прокрутка.
Если сделать вот так:
$j("#comment").jGrow();
то снимается ограничение на максимальную высоту textarea, т.е., в зависимости от количества текста, это поле может растягиваться бесконечно.
Прошу заметить следующий момент. Cрипт не работает, если тегу <textarea> задана высота через CSS, поэтому взамен нужно воспользоваться параметром rows:
<textarea name="comment" id="comment" cols="70" rows="8"></textarea>
Протестировать работу скрипта авторастяжки можно прямо на моем блоге.
Надеюсь, кому-то пригодится.
Смотрите также
Динамическое изменение размера шрифта на jQuery
Публикация статьи “Умные динамические колонки с применением CSS и jQuery” стала поводом для написания сегодняшнего поста. Суть очень схожа и речь здесь пойдет про размер шрифта. Задача – реализовать динамическое ...
Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...
Добавляем кнопку "Google +1" в панель от Share42.com
На своем другом блоге я недавно объяснил, почему в данный момент кнопка “Google +1” не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на ...
Красивые всплывающие подсказки с помощью jQuery
Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим ...
Комментарии (23)
Я не очень понял… а что нельзя обнулить заданное через CSS свойство height? Дома попробую…
Пригодится пригодится и еще как :)
Спасибо.
Спасибо, поставил у себя, тоже искал. Находил для друпала какой-то скрипт с рястягиваемой мышкой границей но вытаскивать лень было, ждал покуда что для jquery попроще будет.
На родительские элементы тоже высоту видимо ставить нельзя, у меня плавать начинал поверх
Steward, что имеешь в виду под словом “обнулить”?
Sonikelf, пожалуйста ;)
2Артём Курапов:
Да, действительно, родительский блок должен быть “резиновым”.
Во FF3 если писать много текста в одну строку, то его не переносит… а просто обрезает :( и скролбар горизонтальный не появляется.
А меня прёт реализация в Safari. надо много текста взял мышкой и растянул текстареа.
Не наблюдаю ни того, ни другого.
Согласен, очень удобная вещь. Разработчикам остальных браузеров нужно брать в пример данную фичу.
Не совсем понятно нафига это нужно. Во первых как уже говорилось можно через CSS, если уж так хочется. Да, еще момент. Если это присутствует на данном блоге, то в шестом ишаке какие то пятнашки получаются. Я пока набирал все дважы слева на право скакнуло.
Хотя чисто с точки зрения разработчика достаточно интересно.
Во-первых, где такое говорилось? Во-вторых, сначала разберитесь в сути вопроса, прежде чем это писать.
К скрипту это отношения не имеет. Пользуйтесь современным браузером.
Если скопипастить текст в textarea, то размер не меняется, пока кнопками курсора до конца текста не добежишь :-) FF3
Сергей, да, есть такое. Но применительно к комментариями это не существенно – комментатор же, как правило, постепенно пишет весь текст, а не копирует его откуда-то. Да и в других случаях использования textarea это в основном происходит так же.
Скрипт говно! Автор во-первых не умеет писать плагины jqueryь а во вторых как уже было сказано не отслеживает достаточно событий. Я копирую комментарии в больших объемах.
Дима, рад что ты активнее начал писать статьи об использовании jquery.
Тоже последнее время заинтересовался, изучаю, и использую в своих проектах.
Кстати впервые услышал об этом фреймворке относительно недавно, когда прочел твою статью о вкладках
Евгений, спасибо. Рад, что тебе нравится ;)
Я новичок. Недавно устновил себе wp. Что значит авто растягивание текстового поля? Какое именно поле будет растягиваться?
Поле, в котором вы пишите текст комментария.
Ясно, Спасибо
в ie 7 вобще не работает
Здравствуйте, Дмитрий.
Возможно мой вопрос будет не совсем по теме, но меня заинтересовал Ваш вариант растяжки “правила комментирования”.
Если Вам не трудно, подскажите, как реализовать эту функцию ?
Вот здесь описывал.
Спасибо большое, Дмитрий! Простите за беспокойство – не нашел в первый раз этот пост.
Очень полезная и нужная функция… для тех, кто понимает!
Удачи Вам в творчестве и новых интересных публикаций для нас!
А зачем там функция noConflict() ?
Для предотвращения конфликтов с другими JS-фреймворками.