by?zhangxinxu?from?http://www.zhangxinxu.com
本文地址：?http://www.zhangxinxu.com/wordpress/?p=1362

一、關于textarea文本域以及高度自適應

textarea標簽為表單元素，一般用在多行文字的輸入。在web應用上常見的是評論輸入框，微博信息輸入框等。例如企鵝微博的輸入框：

作為多行文本域功能來講，textarea滿足了我們大部分的需求。然而，textarea有一個不足就是不能像普通div標簽一樣高度可以跟隨內容自適應。textarea總是很自信地顯擺它的滾動條，高度固執地巋然不動。所以，有時候，為了增加交互體驗想讓文本域高度自適應的時候，就會遇到麻煩。并不是不能實現，例如Google的Buzz的輸入框就是高度自適應里面的內容的，如下截圖：

不說遠的，我個人網站的提問與交流頁面中的回答輸入框（需登錄）：

當輸入一些文字后，文本域的高度自動隨內容多少撐高了：

然而，這些文本域的高度自適應都是通過JavaScript腳本實現的。拿我個人站點上的高度自適應文本框來說，要克隆一個隱藏的textarea，通過實時的文字賦值，檢測是否產生滾動條來確定顯示文本域的高度是否動態增加。對于JavaScript不熟悉的人來講，這種方法的實現比想辦法跟校花約會還麻煩。

然而，實際上，如果你要求不是很高，是個非常簡便，且老少皆宜的實現方法的。這種方法就是使用普通的div標簽模擬textarea文本域，同時又利用了div標簽的高度自適應性。于是，textarea文本域的高度自適應效果就可以輕松實現。

二、div模擬textarea文本域及高度自適應

我之前翻譯過一篇文章，名為“你必須知道的28個HTML5特征、竅門和技術”，其中在“六、內容可編輯”部分介紹了一個標簽屬性，為contenteditable，顧名思意，就是允許用戶編輯元素內容包含的任意文本，包括子元素。

應用了此屬性后，普通的div標簽也會像文本域一樣可以獲得焦點，同時有一個光標在那里閃啊閃，閃啊閃，你越看她她越閃。web QQ 2.0?的聊天對話框的輸入框就是應用了此屬性。

//zxx:企鵝的圣誕主題界面很nice，視覺效果很贊，下雪的效果也很有愛，連cup也為之奔騰。

使用很簡單，一個普通的block元素上加個contenteditable="true"就ok了，如下：

<div contenteditable="true"></div> 

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

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

ok，最麻煩的模擬textarea的可編輯效果已經解決了，現在想要使用div實現高度自適應那就像是給花花草草松松土一樣容易的。使用min-height屬性基本上就一步到位了，考慮到IE6瀏覽器對min/max家族不屑一顧，結合其內部元素溢出會撐開父標簽高寬的特性，IE6瀏覽器直接定高就可以了。于是，假設我們要實現默認200像素高度，高度可隨內容自適應的效果，直接下面兩個樣式就可以了：

{ min-height: 200px; _height: 200px; }

于是，把說到現在的內容結合一起，就可以使用div模擬textarea文本域輕松實現高度自適應了。

如下測試代碼——
CSS代碼：

.test_box {width: 400px; min-height: 120px; max-height: 300px;_height: 120px; margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-size: 12px; word-wrap: break-word;overflow-x: hidden;overflow-y: auto;_overflow-y: visible;
}

HTML代碼：

<div class="test_box" contenteditable="true"><br /></div> 

結果如下圖（全部截自IE6瀏覽器）：

然后從新浪博客首頁隨便找篇文章，拷點文字復制進去，結果如下圖：

可以看到可編輯標簽高度自帶撐開了。完全的CSS，沒有雜碎的js代碼。我們設置可以設定一個最大高度(max-height)，讓其超出的時候出現滾動條，正如下面demo頁面所做的一樣。

您可以狠狠地點擊這里：div模擬textarea以實現高度自適應demo

然而，事情并不會如此一帆風順，還有不少注意事項值得一提。

三、一些注意與說明

1、 現代瀏覽器如Firefox在可編輯模式下的div獲取焦點的時候會有虛框，而實際上textarea是沒有虛框顯示的，此跡象會暴露出div是個冒牌貨，所以，需要添加下面的樣式：

outline:0;

2、 Firefox瀏覽器下可編輯模式的div如果內部元素是空空的，那么其在獲取焦點是時候，光標不可見或是與外部div齊高，這也是會暴露出自己是textarea冒牌貨的，所以，默認情況下，我們可以在此div中增加一個孤單的<br />換行標簽。但是，IE8下，如果有個默認的br標簽，光標位置可能會在第二行閃來閃去，所以，IE8下可編輯div里面默認是不能有br標簽的，這個嘛，您自己想辦法清掉吧。

3、 IE瀏覽器下（IE6~8），輸入文字回車的時候，div內部是會自動產生p標簽包含每行元素的，而其他瀏覽器貌似是產生br標簽（這里尚未全部測試，如有不準，歡迎指正）。由于默認的p標簽是有1em大小的上下margin值的，為了效果統一，我們可以設置諸如下面的樣式清除p標簽的margin值：

.test_box p{ margin: 0; }

4、可編輯模式的div輸入的內容都會是很正宗的HTML代碼，如果作為內容提交的話需要進行HTML字符過濾。還有，如果您是從其他頁面上拷貝一段內容過來，然后粘貼到可編輯模式下的div中，會連HTML也完整的復制過來的（不同于textarea），所以，這里也有必要進行HTML字符過濾（例如web QQ）。

5、 IE6瀏覽器不支持max-height屬性，所以，只用CSS是無法實現超過一定高度出現滾動條的效果，需要js配合實現。

6、 可編輯模式的div標簽與textarea一樣，是支持focus, blur事件的。自然也支持focus偽類，demo頁面中Firefox等現代瀏覽器獲取焦點時的外發光就是使用的:focus。

轉載于:https://www.cnblogs.com/yangyang63963/p/5804459.html

總結

以上是生活随笔為你收集整理的div模拟textarea文本域轻松实现高度自适应——张鑫旭的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。