今天稍微研究了下textarea隨輸入內容自動增長的功能，通過google參考了一些實現方式。
其中大部分是靠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，也是比較耗費資源的。
既然發現了問題，那麼我們就針對問題進行改進，在他人的思路上進行修改，不會太困難。
針對無止境的輪詢，我還是覺得用keyup來做好些，但是事件的處理上，我們可以給使用者乙個時間間隔，並不需要每次輸入都要進行處理，例子中設定的時間間隔為250ms，當使用者輸入的過程中，如果使用者停頓了下，有250ms間隙的話，就把textarea的value賦值給pre的span中。
思路講完了，應該還是比較簡單的。
1<
div
class
="expanding-wrap"
>
2<
div
class
="expanding-area"
>
3<
pre
class
="mirror-wrap"
><
span
class
="mirror"
>
span
><
br/>
pre>
4<
textarea
class
="source"
cols
="30"
rows
="10"
>
textarea
>
5div
>
6div
>
1 (function($, $$) ;910
handler();
1112 textel.addevent('keyup', function
(event) );
1819 })($, $$);
最後，有個參考文獻，覺得不錯，感興趣的可以看看「參考」，本例子可能不支援ie6，放棄ie6有段時間了，我們做前端的，得先前看吶: d
div模擬textarea實現高度自增長
今天看到有人在問能不能實現手機輸入框的高度隨著文字增多而增長，到手機頂部的時候再增加內容，出現滾動條。textarea 的高度是固定的，內容超出就會出現滾動條，使用js控制的話效果不是很理想，所有準備使用div來模擬 textarea，這就要不得不提html5的乙個新屬性 contenteditab...
div模擬textarea實現高度自增長
h5提供了乙個屬性 contenteditable 使得div充當文字輸入不再是夢想 以下是div實現文字輸入的簡單demo div id textarea contenteditable true div css樣式 textarea在vue中如何獲取div中的內容 div id textarea...
網際網路的主流與非主流
每周二晚上的龍門陣之後，照例有個飯局，照例是炳叔點菜，照例是老祝和老虎買單。龍門陣是正規一點的活動時間，這個飯局則完全是扯淡時間。今晚的主角是網際網路行業的傳奇人物蔡文勝。天南海北之中，聊到了火星文輸入法。在座的七八人中，只有我不知道火星文輸入法。老蔡吃驚的問我真不知道，我說真不知道。然後他調侃我說...