欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

div模拟textarea自适应高度_html/css_WEB-ITnose

程序员文章站 2022-06-05 14:04:38
...
　　之前在公司做项目的时候，有这么一个需求，要我写一个评论框，可以随着评论的行数增加而自动扩大，最开始我想用textarea实现，但是后来尝试后发现textarea并不适合，textarea的高度不会随着输入行数的增多而增大，于是我上网寻求了下帮助，发现大神张鑫旭的这篇文章《div模拟textarea文本域轻松实现高度自适应》,成功解决我的问题

代码如下：

 1  1  2  2  3  3  4  4      5  5     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 24 24 25 25     
我是模拟textarea的div
26 26     34 34 35 35

其中有一两个从没见过的属性：

  • -webkit-user-modify: read-only | read-write | read-write-plaintext-only
    read-only read-write read-write-plaintext-only
    内容只读。
    内容可读写。
    内容可读写，但粘贴内容中的富文本格式（如文本的颜色、大小，图片等）会丢失。内容类似于以纯文本显示。
  • contenteditable 属性规定是否可编辑元素的内容。
    true false
    规定可以编辑元素内容。
    规定无法编辑元素内容。

    • 　　

    　　再次感谢鑫大神（http://www.zhangxinxu.com/），分享了好多非常实用的经验，等将来能达到他那种高度，我也想写出好博客分享出来造福人类，哈哈，虽然还很遥远，继续fighting~

    相关标签： div模拟textarea自适应高度

    上一篇： PHP如何实现评论系统？

    下一篇： php smarty模版引擎中的缓存应用

    推荐阅读