Mootools textarea scrollHeight

Question

如何使用mootools或其他包含高度的屬性訪問scrollHeight，以便我可以調整它的大小以生成autogrow textarea？

Answer 1

Mootools提供了多種Element'尺寸'功能，爲您提供有關可滾動和絕對元素尺寸的信息。完整的文檔在這裏可用：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

大衛·沃爾什造就了一支優秀的插件只是這個目的： http://davidwalsh.name/flext-textrea

Answer 3

這裏有一個簡單的方法，我使用的擴展，而且合同文本區域。

你總是會遇到的問題是textare（填充/邊框）上的樣式。 首先要知道的是，getSize（）將從絕對頂部到絕對底部獲得t​​extarea的大小，同時考慮填充和邊框。但是，文本區域.getStyle（'height'）。toInt（）的實際樣式高度是沒有填充和邊框的文本框的內部。這是你需要感興趣的部分，因爲當你設置你的高度時，它會設置它，它不會將textarea的全部高度從絕對頂部設置到底部。

下面是一個工作示例，帶有樣式化的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/