无意中看到一篇博客介绍了contenteditable这个属性——不需用JS，只需在div里加上contenteditable="true"，即可实现div模拟textrarea（文本域），让textrarea的高度随内容的增加而自动增加。当时就惊呆了，居然还有这种操作！！！

<div id="textarea" contenteditable="true"></div>

原文博客

contenteditable属性介绍：http://www.w3school.com.cn/html5/att_global_contenteditable.asp

下面是一个小demo，加了一些样式修饰，然后把文本域也加上了，方便对比。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <style>

        #textarea {

            width: 300px;

            border: 1px solid #ccc;

            min-height: 200px;

            max-height: 600px;

            overflow: auto;

            font-size: 14px;

            outline: none;

            margin-bottom: 20px;

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

            /*可以让元素既可以编辑，又只能输入纯文本，并且不会有富文本，但目前只有谷歌支持，建议移动端用*/

        }

    </style>

    <body>

        <div id="textarea" contenteditable="true">王尼玛</div>

        <textarea name="" rows="10" cols="50">大头死变态</textarea>

    </body>

</html>

注：上面demo中，有一句代码   -webkit-user-modify: read-write-plaintext-only; 可能小伙伴们看着有点蒙。

　　加这句代码是因为用contenteditable属性实现div模拟textarea高度自增长以后，可以复制富文本到文本域里，这句代码就是为了不让复制富文本，只能输入纯文本

　　什么是富文本：https://zhidao.baidu.com/question/345297157.html

      -webkit-user-modify: read-write-plaintext-only属性详解

       

H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）的更多相关文章

  1. H5新增属性classList

    H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...

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

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

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

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

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

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

  5. div模拟textarea自适应高度

    之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...

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

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

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

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

  8. 使用div模拟textarea，实现文本输入框高度自适应（附：js控制textarea实现文本输入框高度自适应）

    一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...

  9. div模拟textarea

    有些Weber可能没有用过contenteditable这个属性,如果想编辑一个DIV里面的内容,这个属性是一个非常不错的选择   <div contenteditable="true ...

随机推荐

  1. 修改Myeclipse的文件默认为UTF-8编码

    一.工程编码默认调整 windows->Preferences...打开"首选项"对话框, 左侧导航树,导航到general->Workspace,右侧 Text fi ...

  2. python基础之Day24

    1.补充内置函数 2.反射 什么是? 通过字符串操作类或者对象的属性 hasattri(a,"b")  判断能否访问到a.b setattri(a,"b",c) ...

  3. [精华][推荐]CAS SSO实现单点登录框架学习源码

    1.通过下载稳定版本的方式下载cas的相关源码包,如下: 直接选择4.2.1的稳定代码即可 2.我们项目中的版本版本使用maven apereo远程库去下载 通过远程maven库下载cas-serve ...

  4. JavaScript 教程

    JavaScript 教程:https://code.ziqiangxuetang.com/js/js-tutorial.html

  5. python基础入门之函数基础

    **python函数**一.def语名 def语名在运行的时候创建一个新的函数对象并且赋值一个变量名 一个def语句可以出现在任一语句可以出现的地方(python中所有的语名都是实时运行的,没有编译这 ...

  6. 配置了yum本地源

    测试机不能联网  所以不能直接安装软件  只能配置本地源 1.   在联网的电脑上下载与Linux内核版本相同的镜像 2.   把此安装镜像放在此Linux测试机上  比如放在家目录下  /home/ ...

  7. javafx安装

    可在官网http://efxclipse.bestsolution.at/ 下载 其中http://efxclipse.bestsolution.at/install.html#all-in-one ...

  8. Django模板变量及静态文件引用

    一.模板变量传递 1.视图向模板传递变量 视图中的列表,数组,字典,函数均可以传递给模板 在视图中定义变量通过render(content{‘name’ : value})传递给模板 模板通过{{  ...

  9. Maven学习笔记2（坐标和依赖）

    1.坐标 Maven坐标为各个构件建立了秩序,任何一个构件都必须明确自己的坐标,一个maven坐标是由一些元素确定的 <groupId>com.alivn.account</grou ...

  10. Linux挂载NAS 网络附属存储

    在工作中经常听到NAS,比如做数据交换,将数据从DB2数据库,导入到ORACLE数据库,采用BCP的方式,首先将DB2导出为文件,再从文件导入到ORACLE.那么中间需要一个很大的存储空间来保存从DB ...