今天突然有位前端的朋友問我textarea怎么實現高度隨內容自增長，我一下子懵了，首先想到的是用js改變textarea的高度，但是百度了很多參考代碼效果都不是很理想。
因為之前實際項目中用的textarea都是定死高度后超出實現滾動條的，如果不是對用戶體驗太在意的話沒必要去搞什么高度自增長......
然而優秀的設計都是眼里融不進沙子的，沒有什么是不可能實現的，接下來就介紹下如何通過div來模擬一個textarea實現高度自增長（當然利用js也可以實現，但是個人感覺沒有必要）。
ok，那么我就來現學現教了，首先敲一個div出來：
<div id="textarea" contenteditable="true"></div>
大家一定發現了一個很少見的屬性 contenteditable ，what？這是什么？懂英文的小伙伴一看可能就懂了，應該是內容可編輯的意思咯，沒錯，通過設置這一屬性為true就可以對div里的內容像textarea一樣進行編輯了，是不是很贊！
然而相信90%的小伙伴會問：這屬性應該是HTML5的吧，IE它不兼容吧。。。
很遺憾，讓這些小伙伴失望了，你們只答對了一半，contenteditable確實是HTML5的屬性，但是這一次IE卻領先了一步，早在很早之前IE就支持了這一屬性，至少IE6是沒有問題的，所以兼容性方面大家可以放心了。
相信現在小伙伴們已經目瞪口呆了，這么實用！這么簡單！一定收藏了先！
慢着，咱們還沒說完呢，既然div已經取代了textarea，接下來我們還得模仿不是嗎？至少也得模仿的像一點才是嘛。
咱們可以通過設置min-height、max-height來對高度進行設定，通過設置padding、outline、font-size、overflow來處理美化細節，代碼如下：
1 #textarea { 2 width:300px; 3 border:1px solid #ccc; 4 min-height:150px; 5 max-height:300px; 6 overflow: auto; 7 font-size: 14px; 8 outline: none; 9 }
完整的演示如下：
ok，我們的目的已經達成了，十分完美，利用這一方法，我們還可以實現很多textarea無法實現的功能，比如在textarea里設置局部字體的顏色、字體大小等等，可以說我們實現了一個能夠識別html代碼的textarea。效果如下：
好了，大功告成！
感謝閱讀，本文靈感來自：http://www.zhangxinxu.com 轉載請注明出處，歡迎大家評論。