div模擬textarea實現高度自增長

h5提供了乙個屬性 contenteditable ，使得div充當文字輸入不再是夢想

以下是div實現文字輸入的簡單demo

<

div 
id="textarea"
contenteditable
="true"
>
div>

#textarea

<

div 
id="textarea"
contenteditable
="true"
@input
="ondivinput($event)"
>
div>

ondivinput(e)

div模擬textarea文字域輕鬆實現高度自適應

因為textarea不支援自適應高度，就是定好高度或者是行數之後，超出部分就會顯示滾動條，看起來不美觀。而用div來模擬時，首先遇到的問題是 div怎麼實現輸入功能？可能我們還是第一次見到這個屬性contenteditable，如乙個普通的block元素上加個contenteditable true...

div模擬textarea實現高度自增長

今天看到有人在問能不能實現手機輸入框的高度隨著文字增多而增長，到手機頂部的時候再增加內容，出現滾動條。textarea 的高度是固定的，內容超出就會出現滾動條，使用js控制的話效果不是很理想，所有準備使用div來模擬 textarea，這就要不得不提html5的乙個新屬性 contenteditab...

div模擬textarea以實現高度自適應例項頁面

使用很簡單，乙個普通的block元素上加個contenteditable true 就ok了，如下 true外面的引號甚至去掉都沒關係。contenteditable屬性雖是html5裡面的內容，但是ie似乎老早就支援此標籤屬性了。所以，相容性方面還是不用太擔心的。ok，最麻煩的模擬textarea...