之前在公司做项目的时候，有这么一个需求，要我写一个评论框，可以随着评论的行数增加而自动扩大，最开始我想用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. [SinGuLaRiTy] 2017-07-22 NOIP2017 模拟赛

    [SInGuLaRiTy-1029] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. <全是看看代码就会的水题,偷个懒不单独写题解了~& ...

  2. 浅识J2EE十三个规范

    前言 没有规矩不成方圆,学习J2EE,先来明白都有什么规范. 内容 1.JDBC(Java Database Connectivity)java数据库连接 a)为java开发人员提供了一个行业标准AP ...

  3. 三大文本处理工具grep、sed及awk

    一.   用grep在文件中搜索文本 grep能够接受正则表达式,生成各种格式的输出.除此之外,它还有大量有趣的选项. 1.  搜索包含特定模式的文本行: 2.  从stdin中读取: 3.  单个g ...

  4. Jmeter实现从csv文件中随机读取数据

    一.需求 参数放在csv文件中,文件格式如下,需求每次从文件中随机读取一行数据. 二.步骤 1.在csv文件中新增加一列,pl 2.新增一个配置原件-随机数,设置如下: 50是文件数据的行数 3.新增 ...

  5. SAP ABAP ALV构建动态输出列与构建动态内表(包留备用)，包含操作abap元类型表及类

    https://blog.csdn.net/zhongguomao/article/details/51095946

  6. P4213 【模板】杜教筛（Sum） min_25筛

    \(\color{#0066ff}{ 题目描述 }\) 给定一个正整数\(N(N\le2^{31}-1)\) 求 \(ans_1=\sum_{i=1}^n\varphi(i)\) \(ans_2=\s ...

  7. p2p-如何拯救k8s镜像分发的阿喀琉斯之踵？

    K8s的出现为PaaS行业的发展打了一针兴奋剂,Docker+k8s的技术路线已经成为了容器云的主流.尤其针对大流量,大弹性的应用场景来说,k8s将其从繁杂的运维.部署工作中彻底拯救出来.然而事情往往 ...

  8. python 编辑器PyCharm

    1.安装与激活 (1)首先去官网下载安装(这个没什么操作) (2)激活,打开编辑器,然后选择这个,进入 http://idea.lanyus.com/  后按照提示的修改文件内容,安装激活就完成了 2 ...

  9. Python学习之路--1.0 Python概述及基本数据类型

    Python是一门解释性语言,弱类型语言 python程序的两种编写方式: 1.进入cmd控制台,输入python进入编辑模式,即可直接编写python程序 2.在.朋友文件中编写python代码,通 ...

  10. JavaScript new Date()IE浏览器下出错 NaN

    当涉及到编程,与日期的工作可能是棘手的.然而,幸运的是,大多数语言都已经完成了这个困难的工作,并有一种内置的日期功能来帮助我们.JavaScript是具有有用的功能来帮助大量输出,设置日期. The ...