div模拟textarea自适应高度
生活随笔
收集整理的這篇文章主要介紹了
div模拟textarea自适应高度
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
之前在公司做項(xiàng)目的時(shí)候，有這么一個(gè)需求，要我寫一個(gè)評(píng)論框，可以隨著評(píng)論的行數(shù)增加而自動(dòng)擴(kuò)大，最開始我想用textarea實(shí)現(xiàn)，但是后來嘗試后發(fā)現(xiàn)textarea并不適合，textarea的高度不會(huì)隨著輸入行數(shù)的增多而增大，于是我上網(wǎng)尋求了下幫助，發(fā)現(xiàn)大神張鑫旭的這篇文章《div模擬textarea文本域輕松實(shí)現(xiàn)高度自適應(yīng)》,成功解決我的問題
代碼如下：
1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8"> 5 5 <title>div模擬textarea自適應(yīng)高度le> 6 6 <style type="text/css"> 7 7 .test_box{ 8 8 width:500px; 9 9 min-height:200px; 10 10 max-height:600px; 11 11 _height:200px;/*兼容IE6瀏覽器*/ 12 12 margin:0 auto; 13 13 padding:3px; 14 14 outline:0; 15 15 border:1px solid #e4e4e4; 16 16 font-size:12px; 17 17 word-wrap:break-word;/*用于英文文本自動(dòng)換行，所有主流瀏覽器支持*/ 18 18 overflow-x:hidden; 19 19 overflow-y:auto; 20 20 -webkit-user-modify: read-write-plaintext-only; 21 21 } 22 22 </style> 23 23 </head> 24 24 <body> 25 25 <div class="test_box" contenteditable="true">我是模擬textarea的div</div> 26 26 <script type="text/javascript"> 27 27 if (typeof document.webkitHidden == "undefined") { 28 28 // 非chrome瀏覽器阻止粘貼 29 29 box.onpaste = function() { 30 30 return false; 31 31 } 32 32 } 33 33 </script> 34 34 </body> 35 35 </html>其中有一兩個(gè)從沒見過的屬性：
- -webkit-user-modify:?read-only | read-write | read-write-plaintext-only
read-only 內(nèi)容只讀。 read-write 內(nèi)容可讀寫。 read-write-plaintext-only 內(nèi)容可讀寫，但粘貼內(nèi)容中的富文本格式（如文本的顏色、大小，圖片等）會(huì)丟失。內(nèi)容類似于以純文本顯示。 - ?contenteditable 屬性規(guī)定是否可編輯元素的內(nèi)容。
true 規(guī)定可以編輯元素內(nèi)容。 false 規(guī)定無法編輯元素內(nèi)容。
? 再次感謝鑫大神（http://www.zhangxinxu.com/），分享了好多非常實(shí)用的經(jīng)驗(yàn)，等將來能達(dá)到他那種高度，我也想寫出好博客分享出來造福人類，哈哈，雖然還很遙遠(yuǎn)，繼續(xù)fighting~
?
轉(zhuǎn)載于:https://www.cnblogs.com/DTBelieve/p/5351475.html
總結(jié)
以上是生活随笔為你收集整理的div模拟textarea自适应高度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux之压缩与解压缩
- 下一篇： 网络流再结