textarea如何實現高度自適應?

轉自:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html


今天需要些一個回覆評論的頁面,設計師給的初始界面就是一個只有一行的框。然後當時就想這個交互該怎麼實現比較好,然後想起了新浪微博的做法:點擊評論,默認顯示一行,當輸入的文字超過一行或者輸入Enter時,輸入框的高度會隨着改變,直到輸入完畢。頓時覺得這個細節做得挺不錯的,可以效仿下。下面分享2種實現textarea高度自適應的做法,一種是用div來模擬textarea來實現的,用CSS控制樣式,不用JS;另一種是利用JS控制的(因爲存在瀏覽器兼容問題,所以寫起來比較麻煩);

方法一:div模擬textarea文本域輕鬆實現高度自適應

demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo1.html

因爲textarea不支持自適應高度,就是定好高度或者是行數之後,超出部分就會顯示滾動條,看起來不美觀。

而用DIV來模擬時,首先遇到的問題是:div怎麼實現輸入功能?

可能我們還是第一次見到這個屬性contenteditable,如一個普通的block元素上加個contenteditable="true"就實現編輯,出現光標了。如

contenteditable屬性雖是HTML5裏面的內容,但是IE似乎老早就支持此標籤屬性了。所以,兼容性方面還是不用太擔心的。

CSS代碼

 HTML代碼

CSS代碼中,因爲IE6不支持min/max,所以做了hack,其他的也好理解。

 

方法二:文本框textarea根據輸入內容自適應高度

demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo2.html

這個寫法是用原生JS寫的,考慮了很多兼容性問題,完全和新浪微博的回覆效果一樣的功能。有興趣的童鞋可以仔細分析下代碼。

CSS代碼

JavaScript代碼

HTML代碼(寫在body裏面的)

 其他方法

發佈了112 篇原創文章 · 獲贊 35 · 訪問量 44萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章