當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

div模拟textarea自适应高度

發布時間：2025/7/14 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 div模拟textarea自适应高度小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　　之前在公司做項目的時候，有這么一個需求，要我寫一個評論框，可以隨著評論的行數增加而自動擴大，最開始我想用textarea實現，但是后來嘗試后發現textarea并不適合，textarea的高度不會隨著輸入行數的增多而增大，于是我上網尋求了下幫助，發現大神張鑫旭的這篇文章《div模擬textarea文本域輕松實現高度自適應》,成功解決我的問題

代碼如下：

1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8"> 5 5 <title>div模擬textarea自適應高度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;/*用于英文文本自動換行，所有主流瀏覽器支持*/ 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>

其中有一兩個從沒見過的屬性：

-webkit-user-modify:?read-only | read-write | read-write-plaintext-only
read-onlyread-writeread-write-plaintext-only
內容只讀。
內容可讀寫。
內容可讀寫，但粘貼內容中的富文本格式（如文本的顏色、大小，圖片等）會丟失。內容類似于以純文本顯示。
?contenteditable 屬性規定是否可編輯元素的內容。
truefalse
規定可以編輯元素內容。
規定無法編輯元素內容。

?　　再次感謝鑫大神（http://www.zhangxinxu.com/），分享了好多非常實用的經驗，等將來能達到他那種高度，我也想寫出好博客分享出來造福人類，哈哈，雖然還很遙遠，繼續fighting~

轉載于:https://www.cnblogs.com/DTBelieve/p/5351475.html

總結

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

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