快捷導(dǎo)航

非主流的textarea自增長實現(xiàn)js代碼

更新時間：2011年12月20日 01:52:02 作者：

今天稍微研究了下textarea隨輸入內(nèi)容自動增長的功能，通過google參考了一些實現(xiàn)方式

其中大部分是靠scrollHeight(非W3C標(biāo)準(zhǔn)，由IE引入)，keyup事件來完成。有一種比較有意思的是通過“鏡像元素(mirror element)”, 和setTimeout輪詢實現(xiàn)。大致的實現(xiàn)思路如下:

把一個單獨的pre元素，通過position:absolute的方式定位于client view之外，并且把它和textarea的樣式設(shè)置的一樣，我們把這個pre元素稱為“mirror“，然后通過setTimeout進行200ms的輪詢，把textarea中新的值更新到mirror元素中，由于mirror元素被設(shè)為block，所以它的大小會隨內(nèi)容的多少而變化，再通過取得mirror元素的offsetHeight來應(yīng)用到對應(yīng)的textarea，使之高度隨內(nèi)容變化。

這確實是個過不錯的想法。但是這樣的輪詢似乎有點”浪費“，因為一般用戶不會一直不停的進行輸入，而且每次去計算offsetHeight，也是比較耗費資源的。

既然發(fā)現(xiàn)了問題，那么我們就針對問題進行改進，在他人的思路上進行修改，不會太困難。

先去掉計算mirror元素offsetHeight這一操作，我們可以用個wrapper包裹mirror元素和textarea,把它們的樣式設(shè)置成相同，mirror元素通過visibility:hidden進行隱藏(注意不是display:none)，這樣mirror元素空間依然占著，然后把textarea相對于wrapper絕對定位，把textarea覆蓋于mirror元素之上，我們的例子中就是textarea覆蓋于pre之上， textarea的height，width屬性均設(shè)為100%，這樣pre的高度變化可以直接反應(yīng)到wrapper上, textarea的大小也會隨之改變，這都是自動的，我們利用了”塊級“元素的特點

針對無止境的輪詢，我還是覺得用keyup來做好些，但是事件的處理上，我們可以給用戶一個時間間隔，并不需要每次輸入都要進行處理，例子中設(shè)置的時間間隔為250ms，當(dāng)用戶輸入的過程中，如果用戶停頓了下，有250ms間隙的話，就把textarea的value賦值給pre的span中。

思路講完了，應(yīng)該還是比較簡單的。

下面是html和對應(yīng)javascript(最近喜歡上mootools了)，由于css篇幅較長，具體可以看頁面底部的jsfiddle share.

復(fù)制代碼代碼如下:

 
<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> 

復(fù)制代碼代碼如下:

 
(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

您可能感興趣的文章: