一、關(guān)于textarea文本域以及高度自適應(yīng)

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

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

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

當(dāng)輸入一些文字后，文本域的高度自動隨內(nèi)容多少撐高了：

然而，這些文本域的高度自適應(yīng)都是通過JavaScript腳本實(shí)現(xiàn)的。拿我個人站點(diǎn)上的高度自適應(yīng)文本框來說，要克隆一個隱藏的textarea，通過實(shí)時的文字賦值，檢測是否產(chǎn)生滾動條來確定顯示文本域的高度是否動態(tài)增加。對于JavaScript不熟悉的人來講，這種方法的實(shí)現(xiàn)比想辦法跟?；s會還麻煩。

然而，實(shí)際上，如果你要求不是很高，是個非常簡便，且老少皆宜的實(shí)現(xiàn)方法的。這種方法就是使用普通的div標(biāo)簽?zāi)Mtextarea文本域，同時又利用了div標(biāo)簽的高度自適應(yīng)性。于是，textarea文本域的高度自適應(yīng)效果就可以輕松實(shí)現(xiàn)。

二、div模擬textarea文本域及高度自適應(yīng)

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

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

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

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

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

true外面的引號甚至去掉都沒關(guān)系。

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

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

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

于是，把說到現(xiàn)在的內(nèi)容結(jié)合一起，就可以使用div模擬textarea文本域輕松實(shí)現(xiàn)高度自適應(yīng)了。

如下測試代碼——
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> 

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

然后從新浪博客首頁隨便找篇文章，拷點(diǎn)文字復(fù)制進(jìn)去，結(jié)果如下圖：

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

div模擬textarea以實(shí)現(xiàn)高度自適應(yīng)demo

然而，事情并不會如此一帆風(fēng)順，還有不少注意事項(xiàng)值得一提。

三、一些注意與說明

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

outline:0;

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

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

.test_box p{ margin: 0; }

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

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

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

最新評論