Mootools textarea scrollHeight

Question

Как я могу получить доступ к scrollHeight с помощью mootools или какого-либо другого свойства, содержащего высоту, чтобы я мог изменить его размер, чтобы сделать текстовое поле autogrow?

Answer 1

Mootools предлагает множество функций «Измерение» элемента, которые дают вам информацию о прокручиваемом и абсолютном размерах элемента.Полные документы доступны здесь: http://mootools.net/docs/core/Element/Element.Dimensions

Что вы хотите сделать, это сравнить возвращаемые значения функции getScrollSize () вашего элемента с функцией getSize () вашего элемента - в частности, с элементом y, который представляет элементи высота прокручиваемой области, соответственно.Что-то вроде этого должно работать:

var myElement = $('myElement'); // get a reference to your element
var scrollSize = myElement.getScrollSize(); // MooTools-specific function.
var elementSize = myElement.getSize(); // MooTools-specific function.
if (scrollSize.y > elementSize.y) { 
    // determine whether the scrollable area is greater than the dimensions
    // of the element. If so, resize the element to match the scrollable area.
    myElement.setStyle('height', scrollSize.y + 'px');
}

Answer 2

Вот простой метод, который я использую, который расширяет, но также сокращает текстовое поле.

Проблема, с которой вы всегда будете сталкиваться, - это стиль на текстовом поле (отступ / граница).Первое, что нужно знать, это то, что getSize () получит размер текстовой области от абсолютной вершины до абсолютного дна с учетом отступов и границ.Однако фактическая высота стиля текстовой области .getStyle ('height'). ToInt () находится внутри текстового поля без отступов и рамки.Это та часть, которая вас интересует, так как, когда вы устанавливаете свою высоту, она устанавливает ее, она не устанавливает полную высоту текстовой области от абсолютного сверху вниз.

Вот рабочий пример,с текстовой областью, которая стилизована (см. демонстрацию). Это также изменит размер элемента правильно, если вы запустили его внутри domReady.

Answer 3

Дэвид Уолш создал отличный плагин именно для этой цели: http://davidwalsh.name/flext-textrea