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

2021-08-31 07:55:17 字數 362 閱讀 4135

使用很簡單,乙個普通的block元素上加個contenteditable="true"就ok了,如下:

true外面的引號甚至去掉都沒關係。

contenteditable屬性雖是html5裡面的內容,但是ie似乎老早就支援此標籤屬性了。所以,相容性方面還是不用太擔心的。

ok,最麻煩的模擬textarea的可編輯效果已經解決了,現在想要使用div實現高度自適應那就像是給花花草草鬆鬆土一樣容易的。使用min- height屬性基本上就一步到位了,考慮到ie6瀏覽器對min/max家族不屑一顧,結合其內部元素溢位會撐開父標籤高寬的特性,ie6瀏覽器直接定高就可以了。

**css**:

.test_box

html**:

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

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

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