Растягиваемый textarea

Textarea autoresize

~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~С помощью плагина Textarea autoresize можно делать элементы textarea растягиваемыми по вертикали, чтобы все его содержимое помещалось в нем без скролинга (как в сообщениях на сайте вконтакте).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/textareaAutoresize/autoresize.jquery.min.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
    textarea{display:block; width:450px; height:65px;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~textarea~gt~При добавлении содержимого в это поле, оно будет автоматически подстраивать высоту, достаточную, чтобы не появился скролл.~lt~/textarea~gt~
  ~lt~script~gt~
    $('textarea').autoResize();
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Анимация~lt~/tit~gt~
~lt~coment~gt~По умолчанию, изменение размеров уже происходит анимировано (размер изменяется быстро (за 150 мс), но плавно). Однако анимацию можно сделать более акцентированной. Например, можно установить прозрачность во время ее выполнения и увеличить это время. ~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/textareaAutoresize/autoresize.jquery.min.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
    textarea{display:block; width:450px; height:65px;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~textarea~gt~При добавлении содержимого в это поле, оно будет автоматически подстраивать высоту, достаточную, чтобы не появился скролл.~lt~/textarea~gt~
  ~lt~script~gt~
    $('textarea').autoResize({
      // действия при старте анимации:
      onResize : function() {
        $(this).css({opacity:0.5});
      },
      // действия после завершения анимации:
      animateCallback : function() {
        $(this).css({opacity:1});
      },
      // продолжительность анимации:
      animateDuration : 300
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Без отступа~lt~/tit~gt~
~lt~coment~gt~По умолчанию, плагин оставляет после текста отступ в текстовом поле, чтобы пользователь сайта догадывался, что текстовое поле не заканчивается. Если вы хотите убрать или изменить размер этого отступа, воспользуйтесь свойством extraSpace~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/textareaAutoresize/autoresize.jquery.min.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
    textarea{display:block; width:450px; height:65px;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~textarea~gt~При добавлении содержимого в это поле, оно будет автоматически подстраивать высоту, достаточную, чтобы не появился скролл.~lt~/textarea~gt~
  ~lt~script~gt~
    $('textarea').autoResize({
      // уберем отступ
      extraSpace:0,
      // отменим анимацию
      animate:false
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Границы растяжения~lt~/tit~gt~
~lt~coment~gt~Минимальной границей растяжения является первоначальная заданная высота текстового поля. Максимальная определяется в свойстве limit. По умолчанию оно равно 1000 пикселям. Изменим в данном примере эту величину до 150 пикселей.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/textareaAutoresize/autoresize.jquery.min.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
    textarea{display:block; width:450px; height:65px;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~textarea~gt~При добавлении содержимого в это поле, оно будет автоматически подстраивать высоту, достаточную, чтобы не появился скролл.~lt~/textarea~gt~
  ~lt~script~gt~
    $('textarea').autoResize({
      // установим максимальный размер растяжения
      limit:150, 
      // отменим анимацию
      animate:false
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Описание

Свойства

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

Подключение и использование

Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery и файл с плагином (можно скачать на официальной странице):

~lt~script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"~gt~~lt~/script~gt~
~lt~script type="text/javascript" src="autoresize.jquery.min.js"~gt~~lt~/script~gt~

Чтобы после этого сделать конкретное текстовое поле (допустим с идентификатором textField) растягиваемым, необходимо применить метод .autoResize() к соответствующему объекту jQuery:

$('#textField').autoResize();

Замечание:чтобы растягивание текстового поля могло происходить с анимацией, необходимо, чтобы его css-свойство display было установлено в block (по умолчанию, у текстовых полей оно равно inline-block).

Если необходимо задать специфические настройки (список настроек см. в разделе свойства), то следует сделать это при установке плагина в первом параметре метода:

$('textarea').autoResize({
  // установим максимальный размер растяжения
  limit:150, 
  // отменим анимацию
  animate:false
});

Информация

Размер плагина ~1k

Официальная страница: [1]

Кроссбраузерный (работает во всех современных браузерах)

↓ название :типы значений (значение по умолчанию)

onResize:function(null)

В свойстве onResize можно указать функцию, которая будет вызываться в момент (старта) изменения размеров текстового поля. Переменная this внутри этой функции будет содержать DOM-элемент с текстовым полем, у которого был изменен размер.

Чтобы обработать завершение изменения размеров текстового поля, можно воспользоваться свойством animateCallback.

// ------- Работа со свойством onResize ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ onResize: function(){
  alert('Размер текстового поля был изменен.');
} });

animate:boolean(true)

Определяет, будет ли применяться анимация плавного изменения размеров текстового поля или нет. Чтобы анимация заработала, необходимо еще, чтобы css-свойство display, текстового поля, было установлено в block (по умолчанию, у текстовых полей оно равно inline-block).

// ------- Работа со свойством animate ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ animate: false });

animateDuration:integer(150)

Определяет продолжительность растягивания/сжимания текстового поля при необходимости изменить его размеры. В миллисекундах. Имеет смысл только при включенной анимации (см. свойство animate).

// ------- Работа со свойством animateDuration ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ animateDuration: 300 });

animateCallback:function(null)

В этом свойстве можно задать функцию, которая будет вызываться каждый раз при выполнении анимации (в момент ее завершения). Переменная this внутри этой функции будет содержать DOM-элемент с текстовым полем, у которого был изменен размер.

Чтобы обработать момент старта изменения размеров текстового поля, можно воспользоваться свойством onResize.

// ------- Работа со свойством animateCallback ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ onResize: function(){
  alert('Размер текстового поля был изменен.');
} });

extraSpace:integer(20)

В этом свойстве задается размер отступа (в пикселях) от нижней строки до нижней границы текстового поля. Как утверждает автор плагина, наличие этого отступа подсказывает пользователям, что можно писать дальше, не выходя за рамки textarea. Однако удаление отступа приводит к скачкам текста при растягивании текстового поля (см. пример "без отступа"), поэтому наличие отступа можно считать необходимой мерой для приемлемого использования этого плагина.

// ------- Работа со свойством extraSpace ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ extraSpace: 30 });

limit:integer(1000)

В этом свойстве задается максимальный размер до которого будет растягиваться текстовое поле (в пикселях). После достижения этого размера у текстовое поля появится полоса прокрутки (см. пример "Границы растяжения").

// ------- Работа со свойством limit ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ limit: 300 });

Растягиваемый textarea

Textarea autoresize

Подключение и использование

Информация

Функции по категориям

Навигация