其中大部分是靠scrollHeight(非W3C標准，由IE引入)，keyup事件來完成。有一種比較有意思的是 通過“鏡像元素(mirror element)”, 和setTimeout輪詢實現。大致的實現思路如下:
把一個單獨的pre元素，通過position:absolute的方式定位於client view之外，並且把它和textarea的樣式設置的一樣，我們把這個pre元素稱為“mirror“，然後通過setTimeout進行200ms的輪詢，把textarea中新的值更新到mirror元素中，由於mirror元素被設為block，所以它的大小會隨內容的多少而變化，再通過取得mirror元素的offsetHeight來應用到對應的textarea，使之高度隨內容變化。
這確實是個過不錯的想法。但是這樣的輪詢似乎有點”浪費“，因為一般用戶不會一直不停的進行輸入， 而且每次去計算offsetHeight，也是比較耗費資源的。
既然發現了問題，那麼我們就針對問題進行改進，在他人的思路上進行修改，不會太困難。
先去掉計算mirror元素offsetHeight這一操作，我們可以用個wrapper包裹mirror元素和textarea,把它們的樣式設置成相同，mirror元素通過visibility:hidden進行隱藏(注意不是display:none)，這樣mirror元素空間依然占著， 然後把textarea相對於wrapper絕對定位，把textarea覆蓋於mirror元素之上，我們的例子中就是textarea覆蓋於pre之上， textarea的height，width屬性均設為100%，這樣pre的高度變化可以直接反應到wrapper上, textarea的大小也會隨之改變， 這都是自動的，我們利用了”塊級“元素的特點
針對無止境的輪詢，我還是覺得用keyup來做好些，但是事件的處理上，我們可以給用戶一個時間間隔，並不需要每次輸入都要進行處理，例子中設置的時間間隔為250ms，當用戶輸入的過程中，如果用戶停頓了下，有250ms間隙的話，就把textarea的value賦值給pre的span中。
思路講完了，應該還是比較簡單的。
下面是html和對應javascript(最近喜歡上mootools了)，由於css篇幅較長，具體可以看頁面底部的jsfiddle share.
復制代碼 代碼如下:
<div class="expanding-wrap">
<div class="expanding-area">
<pre class="mirror-wrap"><span class="mirror"></span><br/></pre>
<textarea class="source" cols="30" rows="10"></textarea>
</div>
</div>
復制代碼 代碼如下:
(function($, $$) {
var mirrorEl = $$('.expanding-area .mirror'),
textEl = $$('.expanding-area .source'),
timehandle = null,
handler = function() {
mirrorEl.set('text', textEl.get('value'));
};
handler();
textEl.addEvent('keyup', function(event) {
clearTimeout(timehandle);
timehandle = handler.delay(200);
});
})($, $$);
最後，有個參考文獻，覺得不錯，感興趣的可以看看“參考”，本例子可能不支持IE6，放棄IE6有段時間了，我們做前端的，得先前看吶: D