快捷導(dǎo)航

非主流的textarea自增長(zhǎng)實(shí)現(xiàn)js代碼

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

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

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

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

這確實(shí)是個(gè)過(guò)不錯(cuò)的想法。但是這樣的輪詢似乎有點(diǎn)”浪費(fèi)“，因?yàn)橐话阌脩舨粫?huì)一直不停的進(jìn)行輸入，而且每次去計(jì)算offsetHeight，也是比較耗費(fèi)資源的。

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

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

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

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

下面是html和對(duì)應(yīng)javascript(最近喜歡上mootools了)，由于css篇幅較長(zhǎng)，具體可以看頁(yè)面底部的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); 
}); 
})($, $$); 

最后，有個(gè)參考文獻(xiàn)，覺(jué)得不錯(cuò)，感興趣的可以看看“參考”，本例子可能不支持IE6，放棄IE6有段時(shí)間了，我們做前端的，得先前看吶: D

您可能感興趣的文章: