div模擬textarea文本域如何實現高度自適應

今天就跟大家聊聊有關div模擬textarea文本域如何實現高度自適應，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

p的contenteditable屬性能夠允許用戶編輯元素內容包含的任意文本，包括子元素,這是模擬文本域的關鍵

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

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

<p contenteditable="true"></p>

true外面的引號甚至去掉都沒關系。 contenteditable屬性雖是HTML5里面的內容，但是IE似乎老早就支持此標簽屬性了。所以，兼容性方面還是不用太擔心的。

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

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

于是，把說到現在的內容結合一起，就可以使用p模擬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代碼：

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

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

一些注意與說明

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

outline:0;

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

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

.test_box p{ margin: 0; }

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

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

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

看完上述內容，你們對div模擬textarea文本域如何實現高度自適應有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。