建站
咨詢
售后
建站咨詢
新聞中心
今天就跟大家聊聊有關(guān)div模擬textarea文本域如何實現(xiàn)高度自適應(yīng)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
p的contenteditable屬性能夠允許用戶編輯元素內(nèi)容包含的任意文本，包括子元素,這是模擬文本域的關(guān)鍵
應(yīng)用了此屬性后，普通的p標(biāo)簽也會像文本域一樣可以獲得焦點(diǎn)，同時有一個光標(biāo)在那里閃啊閃，閃啊閃，你越看她她越閃。web QQ 2.0 的聊天對話框的輸入框就是應(yīng)用了此屬性
使用很簡單，一個普通的block元素上加個contenteditable=”true”就ok了，如下：
true外面的引號甚至去掉都沒關(guān)系。contenteditable屬性雖是HTML5里面的內(nèi)容，但是IE似乎老早就支持此標(biāo)簽屬性了。所以，兼容性方面還是不用太擔(dān)心的。
ok，最麻煩的模擬textarea的可編輯效果已經(jīng)解決了，現(xiàn)在想要使用p實現(xiàn)高度自適應(yīng)那就像是給花花草草松松土一樣容易的。使用min-height屬性基本上就一步到位了，考慮到IE6瀏覽器對min/max家族不屑一顧，結(jié)合其內(nèi)部元素溢出會撐開父標(biāo)簽高寬的特性，IE6瀏覽器直接定高就可以了。于是，假設(shè)我們要實現(xiàn)默認(rèn)200像素高度，高度可隨內(nèi)容自適應(yīng)的效果，直接下面兩個樣式就可以了：
{ min-height: 200px; _height: 200px; }
于是，把說到現(xiàn)在的內(nèi)容結(jié)合一起，就可以使用p模擬textarea文本域輕松實現(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代碼：
結(jié)果如下圖（全部截自IE6瀏覽器）：
一些注意與說明
1.現(xiàn)代瀏覽器如Firefox在可編輯模式下的p獲取焦點(diǎn)的時候會有虛框，而實際上textarea是沒有虛框顯示的，此跡象會暴露出p是個冒牌貨，所以，需要添加下面的樣式：
outline:0;
2.Firefox瀏覽器下可編輯模式的p如果內(nèi)部元素是空空的，那么其在獲取焦點(diǎn)是時候，光標(biāo)不可見或是與外部p齊高，這也是會暴露出自己是textarea冒牌貨的，所以，默認(rèn)情況下，我們可以在此p中增加一個孤單的換行標(biāo)簽。但是，IE8下，如果有個默認(rèn)的br標(biāo)簽，光標(biāo)位置可能會在第二行閃來閃去，所以，IE8下可編輯p里面默認(rèn)是不能有br標(biāo)簽的，這個嘛，您自己想辦法清掉吧。
3、 IE瀏覽器下（IE6~8），輸入文字回車的時候，p內(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、可編輯模式的p輸入的內(nèi)容都會是很正宗的HTML代碼，如果作為內(nèi)容提交的話需要進(jìn)行HTML字符過濾。還有，如果您是從其他頁面上拷貝一段內(nèi)容過來，然后粘貼到可編輯模式下的p中，會連HTML也完整的復(fù)制過來的（不同于textarea），所以，這里也有必要進(jìn)行HTML字符過濾（例如web QQ）。
5、 IE6瀏覽器不支持max-height屬性，所以，只用CSS是無法實現(xiàn)超過一定高度出現(xiàn)滾動條的效果，需要js配合實現(xiàn)。
6、 可編輯模式的p標(biāo)簽與textarea一樣，是支持focus, blur事件的。自然也支持focus偽類，demo頁面中Firefox等現(xiàn)代瀏覽器獲取焦點(diǎn)時的外發(fā)光就是使用的:focus。
看完上述內(nèi)容，你們對div模擬textarea文本域如何實現(xiàn)高度自適應(yīng)有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
文章名稱：div模擬textarea文本域如何實現(xiàn)高度自適應(yīng)-創(chuàng)新互聯(lián)
鏈接分享：http://fisionsoft.com.cn/article/ppppj.html
