Question

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

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

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

Answer 3

这是我使用的一种简单方法，可以扩展但也可以收缩textarea。

你总是会遇到的问题是textare（填充/边框）的样式。首先要知道的是，考虑到填充和边框，getSize（）将从绝对顶部到绝对底部获得textarea的大小。但是，文本区域.getStyle（＆＃39; height＆＃39;）。toInt（）的实际样式高度是文本框内部没有填充和边框。这是您需要感兴趣的部分，因为当您设置高度时，它设置了它，它不会将textarea的整个高度从绝对顶部设置为底部。

这是一个工作示例，其中包含一个样式的文本区域（请参阅演示）如果你在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/

Mootools textarea scrollHeight

3 个答案: