SULI COMPANY | Научно-технический сайт Сулико Асабашвили » Программирование » CSS » Автоматическое изменение размера элемента textarea
Информация к новости
  • Просмотров: 382
  • Автор: sulicompany
  • Дата: 17-12-2012, 00:30
 (голосов: 0)
17-12-2012, 00:30

Автоматическое изменение размера элемента textarea

Категория: Программирование » CSS


В данном уроке представлено решение задачи автоматического изменения размера элементаtextareaв соответствии с содержанием, которое может быть загружено динамически с помощью AJAX. Размер содержания не известен, а элементtextarea  не изменяет размера естественным образом, как другие элементы HTML. Поэтому нужно использовать javascript для изменения высоты элемента каждый раз при обновлении содержания.

Казалось бы - простая задача. Но если поискать плагины или скрипты, которые посвящены данной теме, то обнаружится неприятный сюрприз - они все оказываются чрезмерно сложными для решения такого простого вопроса. Большинство из них использует сложные математические вычисления, хотя есть более простой способ.

Используем скрытый клонирующий элемент.

Элемент<div>естественным образом растягивается , чтобы все содержание (предполагаем, что отключено обтекание  текста или используется абсолютное позиционирование). То есть, чтобы получить высоту элементаtextarea, нужно сделать следующее:

  • Взять содержимое элементаtextarea.
  • Создать невидимый клонирующий элементdiv.
  • Задать для клона такие же типографические свойства и ширину, как и у элементаtextarea.
  • Поместить содержание в клон.
  • Получить высоту клона.
  • Использовать полученное значение для изменения высоты элементаtextarea.

Код

Ключевым моментом данного решения является код CSS. Как уже упоминалось, невидимый клон должен иметь такие же типографические свойства, как и элементtextarea. В список включается не толькоfont-sizeиfont-family, но и свойстваwhite-spaceиword-wrap, так как клон должен имитировать все, что происходит внутри элементаtextarea.

Для элементаtextareaкод CSS будет следующим:

01 textarea {
02     width500px;
03     min-height50px;
04     font-familyArialsans-serif;
05     font-size13px;
06     color#444;
07     padding5px;
08 }
09
10 .noscroll {
11     overflowhidden;
12 }

Обратите внимание на отдельный класс со свойствомoverflow: hidden, который используется для предотвращения появления полоски прокрутки. Обычно, отключение полоски прокрутки у элементаtextarea является плохой идеей, но мы изменяем его с помощью javascript. Данный класс будет добавляться кодом javascript, поэтому при отключенном JavaScipt элементtextareaбудет функционировать нормально (с прокруткой).

Следующий код CSS используется для скрытого клонирующего элемента:

01 .hiddendiv {
02     displaynone;
03     white-space: pre-wrap;
04     width500px;
05     min-height50px;
06     font-familyArialsans-serif;
07     font-size13px;
08     padding5px;
09     word-wrap: break-word;
10 }

Мы используем свойствоdisplay: none, чтобы сделать элемент невидимым для пользователя. Скорее всего, такое решение подходит и для программ читалок с экрана.

Также используется свойствоwhite-spaceсо значением “pre-wrap”, для корректного переноса строк. Ширина элемента клона равна ширине элементаtextarea. Кроме того одинаковыми задаются несколько других свойств, в том числе иmin-height.

А теперь код javascript (используется jQuery):

01 $(function() {
02     vartxt = $('#comments'),
03     hiddenDiv = $(document.createElement('div')),
04     content = null;
05
06     txt.addClass('noscroll');
07     hiddenDiv.addClass('hiddendiv');
08
09     $('body').append(hiddenDiv);
10
11     txt.bind('keyup'function() {
12
13         content = txt.val();
14         content = content.replace(/\n/g, '<br>');
15         hiddenDiv.html(content);
16
17         txt.css('height', hiddenDiv.height());
18
19     });
20 });

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

Высота динамически изменяется при обработке события jQuerykeyup. Код легко изменить для работы с AJAX, если содержание меняется таким образом.

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

А что происходит в IE6-8?

Решение в чистом виде не работает в IE6-8. Причина - плохая обработка внутреннего HTML содержания. Решение, которое действует почти во всех случаях заключается в следующей строке javascript кода:

1 // Решение проблемы в обработкой внутреннего HTML содержания в IE
2 content = content.replace(/\n/g, '<br>');

Однако длинные строки без переносов продолжают вносить ошибки в процесс. Поэтому надо использовать свойствоword-wrap: break-wordдля клонирующего элемента.