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

代码如下：

  1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title>div模拟textarea自适应高度le>

  6     <style type="text/css">

  7         .test_box{

  8             width:500px;

  9             min-height:200px;

 10             max-height:600px;

 11             _height:200px;/*兼容IE6浏览器*/

 12             margin:0 auto;

 13             padding:3px;

 14             outline:0;

 15             border:1px solid #e4e4e4;

 16             font-size:12px;

 17             word-wrap:break-word;/*用于英文文本自动换行，所有主流浏览器支持*/

 18             overflow-x:hidden;

 19             overflow-y:auto;

 20             -webkit-user-modify: read-write-plaintext-only;

 21         }

 22     </style>

 23 </head>

 24 <body>

 25     <div class="test_box" contenteditable="true">我是模拟textarea的div</div>

 26     <script type="text/javascript">

 27         if (typeof document.webkitHidden == "undefined") {

 28             // 非chrome浏览器阻止粘贴

 29             box.onpaste = function() {

 30                 return false;

 31             }

 32         }

 33     </script>

 34 </body>

 35 </html>

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

  • -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自适应高度的更多相关文章

  1. div模拟textarea实现高度自增长

    今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...

  2. div模拟textarea且高度自适应

    需求 我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度, ...

  3. div模拟textarea以实现高度自适应实例页面

    作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...

  4. div模拟textarea文本域轻松实现高度自适应

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  6. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  7. textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标

    1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...

  8. H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）

    无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...

  9. textarea自适应高度

    最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...

随机推荐

  1. Git 分支管理-git stash 和git stash pop

    https://blog.csdn.net/u010697394/article/details/56484492 合并分支,冲突是难免的,在实际协作开发中我们遇到的情况错综复杂,今天就讲两个比较重要 ...

  2. loj #6077. 「2017 山东一轮集训 Day7」逆序对

    #6077. 「2017 山东一轮集训 Day7」逆序对   题目描述 给定 n,k n, kn,k,请求出长度为 n nn 的逆序对数恰好为 k kk 的排列的个数.答案对 109+7 10 ^ 9 ...

  3. DoS（拒绝服务攻击）与DDoS（分布式拒绝服务攻击）

    SYN Flood是当前最流行的DoS(拒绝服务攻击)与DDoS(分布式拒绝服务攻击)的方式之一,这是一种利用TCP协议缺陷,发送大量伪造的TCP连接请求,从而使得被攻击方资源耗尽(CPU满负荷或内存 ...

  4. Eclipse 创建Maven 项目

    https://www.cnblogs.com/noteless/p/5213075.html

  5. 谁能赢呢？ BZOJ 2463

    题目描述 小明和小红经常玩一个博弈游戏.给定一个n×n的棋盘,一个石头被放在棋盘的左上角.他们轮流移动石头.每一回合,选手只能把石头向上,下,左,右四个方向移动一格,并且要求移动到的格子之前不能被访问 ...

  6. spring boot +Thymeleaf+mybatis 集成通用PageHelper，做分页

    controller: /**  * 分页查询用户  * @param request  * @param response  * @return  * @throws Exception  */ @ ...

  7. 【Leetcode】Single Number

    Given an array of integers, every element appears twice except for one. Find that single one. Note:Y ...

  8. IT网址大全

    图像处理 [素材]   在线作图 [素材]   思缘设计论坛 [素材]   ps联盟 [素材]   ps学习网 [素材]   ps教程论坛 [素材]   ps爱好者 [素材]   46ps [素材] ...

  9. JDK Integer

    1. public static int parseInt(String s, int radix) a. 充分考虑各种异常情况:字符串为空,带符号,进制出界,计算值出界 b. 计算时转换为负数进行处 ...

  10. FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    官网:http://ffmpeg.org 一.FFmpeg安装 安装依赖包: yum install libtheora-devel libvorbis-devel 1 FFmpeg编译安装: 由于系 ...