无意中看到一篇博客介绍了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. 移动端h5调试方法

    charles代理 使用技巧如下: http://www.jianshu.com/p/fdd7c681929c 1.手机wifi连接代理 以iphone为例,长按住wifi, 进入下一页,可看到 HT ...

  2. 基于SoftRoCE 了解RDMA

    RDMA是基于IB技术的内存直接传送,无需内核参与,硬件网卡搞定.IB需要HPC领域的专用硬件,ROCE则是RDMA协议在普通以太网卡的实现,RoCEv1是在MAC上的二层封装,局域网内可以,要通过路 ...

  3. yarn查询/cluster/nodes均返回localhost

    背景: 1.已禁用ipv6. 2.所有节点的/etc/hosts正确配置,任务在ResourceManager提交. 3.yarn-site.xml中指定了 yarn.resourcemanager. ...

  4. 关于Https

    http://blog.csdn.net/wfdtxz/article/details/8678982 https://www.tuicool.com/articles/feYfE3I https:/ ...

  5. 【转】一个 Linux 上分析死锁的简单方法

    简介 死锁 (deallocks): 是指两个或两个以上的进程(线程)在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁,这 ...

  6. Spring事务，Bean生命周期

    一.事务相关: 1.Spring事务基于Spring AOP切面编程: 2.AOP基于代理模式,得到需要开启事务的代码的代理对象: 3.而没有开启事务的Service方法里调用了开启事务 @Trans ...

  7. mac查看当前调用tcp的进程并关闭指定进程

    查看所有tcp进程 监听的端口 lsof -iTCP -sTCP:LISTEN 查看指定端口信息 lsof -i: 关闭指定进程 kill -

  8. layer.tips属性

    layer.tips(新加的内容,'选择节点',{time: 0, area: ['20%', '20%'], skin: 'layui-layer-rim', tips: [3, '#ffffff' ...

  9. Ubuntu学习之路

    一. Ubuntu简介 Ubuntu(乌班图)是一个基于Debian的以桌面应用为主的Linux操作系统,据说其名称来自非洲南部祖鲁语或科萨语的“ubuntu”一词,意思是“人性”.“我的存在是因为大 ...

  10. [总结]给pcDuino v2编译Linux kernel

    1.版本问题 推荐选择pcdunio提供的官方的kernel. 当然可以选用www.github.com/linux-sunxi 中的kernel,不过有很多驱动都用不了包括arduino. 我尝试了 ...