Mootools textarea滚动高度

Question

如何使用mootools或其他包含高度的属性访问scrollHeight，以便调整其大小以形成自动增长的文本区域？

Answer 1

Mootools提供了各种Element'dimension'功能，可为您提供有关可滚动和绝对元素大小的信息。 此处提供完整文档： 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

David Walsh为此目的创建了一个出色的插件： http : //davidwalsh.name/flext-textrea

Answer 3

这是我正在使用的一种简单方法，既可以扩展文本区域，也可以收缩文本区域。

您将始终遇到的问题是textare的样式（填充/边框）。 首先要知道的是，getSize（）将获得文本区域的大小，从绝对顶部到绝对底部，同时考虑到填充和边框。 但是，文本区域.getStyle（'height'）。toInt（）的实际样式高度是文本框的内部，没有填充和边框。 这是您需要关注的部分，因为当您设置高度时，它会设置该值，而不是设置文本区域从绝对顶部到底部的整个高度。

这是一个工作示例，其文本区域已设置样式（请参见演示）。如果在domReady中运行该元素，这也将正确调整其大小。

    function expBox(el){
        var e     = $(el.id);
        if(typeof(e._expBox) == "undefined"){
            var v           = e.value;
            e.value         = "";
            var ss          = e.getScrollSize();
            var s           = e.getSize();
            var h           = e.getStyle("height").toInt();
            e._expBox       = (s.y-h)-(s.y-ss.y);
            e.value         = v;
        }
        var k = event.keyCode || event.charCode;
        if(k == 8 || k == 46){
            e.setStyle("height","auto");
        }
        var ss    = e.getScrollSize();
        e.setStyle("height",(ss.y-e._expBox));
    }

演示： http ： //jsfiddle.net/greatbigmassive/M6X5j/