Плагин уже учитывает все поля, в том числе добавленные после своего первого запуска.
Проблема с текстовыми полями внутри скрытых контейнеров: невозможно узнать их достоверную высоту до их первого отображения. Пример таких контейнеров — вкладки.
Если отобразить контейнер, то поля в нём будут с высотой по умолчанию. Плагин выставит верную высоту только по вводу в эти поля данных пользователем. Таким образом, нужно высчитывать высоту полей в скрытых контейнерах только один раз, перед вводом.
Могу предложить два варианта работы с такими полями:
- Простой — запускать вычисление высоты полей вручную по переключению режима отображения контейнеров. В обработчик вкладок нужно добавить вызов соответствующего метода:
...
// отображаем выбранную вкладку
currentTabContent
.addClass('active')
// ищем текстовые поля по отображению вкладки
.find('textarea').each(function () {
var field = $(this).get(0);
// ждём, чтобы вкладка гарантированно переключилась
setTimeout(function () {
fieldAutosize.handle(field);
}, 0);
});
...
Этот вариант неудобен тем, что нужно такую правку внести в другие обработчики переключений отображения. В то же время, может быть, больше никаких правок и не понадобится, если такая особенность есть только у владок.
- Непростой — получать высоту полей в скрытых контейнерах автоматически. Тут тоже два пути:
а) Манипуляция со стилями контейнеров.
По этому пути пошли, например, создатели jquery.actual. Здесь также можно прочесть об этом способе.
Нужно убрать стиль display: none
у всех скрытых контейнеров, заменив его на аналогичный, но не мешающий получить высоту содержимого. При этом, значение display
должно стать таким, которое будет у элемента при его отображении. Допустим:
element {
display: block; // чтобы получить размер содержимого
visibility: hidden; // чтобы сделать элемент невидимым
height: 0; // чтобы элемент не сдвигал следующие элементы в потоке
overflow: hidden; // чтобы скрыть содержимое
}
Когда все контейнеры отобразятся, подсчитать верную высоту, применить её и вернуть отображение скрытых контейнеров к первоначальному значению.
Особенность способа в том, что невозможно предугадать, какое значение display
будет у контенеров при их отображении.
б) Слежение за изменением состояния контейнеров.
В современных браузерах есть возможность следить за изменением DOM
. Благодаря этому, можно следить за изменением атрибутов скрытых полей и их контейнеров. Это можно делать, например, так.
Следить можно за атрибутами, которые могут менять отображение: style
, class
, hidden
.
На практике поля могут скрываться и другими атрибутами, в том числе произвольными data-*
. Также, отображение может зависеть от содержимого тегов style
и подключаемых файлов стилей.
Если требуемый атрибут изменился, проверять видимость полей. Если видимы — выставлять нужную высоту.