无意中看到一篇博客介绍了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. MySQL数据库开发常见问题及几点优化！

    从一下三个方面考虑: 库表设计 慢 SQL 问题 误操作.程序 bug 时怎么办 一.库表设计 1.1.引擎选择 在 MySQL5.1 中,引入了新的插件式存储引擎体系结构,允许将存储引擎加载到正在运 ...

  2. struts 1.x 方法探析

    public ActionForward index(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpS ...

  3. 如何打开用eclipse没有.project文件的Java工程

    大概分为以下7个步骤,具体如下: 1.在你的eclipse下新建一个与你想要打开的源代码项目同名的一个项目(我这举例叫myweb). 2.在电脑磁盘中找到刚刚新建的项目,把它生成的.project文件 ...

  4. 洛谷1027 Car的旅行路线

    原题链接 将每个城市拆成四个点,即四个机场来看,那么这题就是求最短路. 不过建图有些麻烦,先要找出第四个机场的坐标. 设另外三个机场的坐标为\((x_1, y_1), (x_2, y_2), (x_3 ...

  5. 内嵌圆角CSS实现

    前言 开发项目时,经常会遇到如上图左上角和右上角这种内嵌的圆角效果,在以前css3还没有普及时不用说一张图片搞定,但是到现在我们完全可以用css去实现. 实现 第一步:思路 仔细观察这个小缺角,它其实 ...

  6. 20165213 周启航Exp2 后门原理与实践

    Exp2 后门原理与实践 实验内容 任务一 使用netcat获取主机操作Shell,cron启动 1.确认kali和主机的ip,关闭防火墙 (192.169.127.132) (10.1.1.197) ...

  7. Chapter6_访问权限控制_访问权限修饰词

    Java中有四种访问权限,public,private,protected和包访问权限,它们是置于类中每一个成员之前的定义,无论是一个域还是一个方法,下面一一介绍. 一.包访问权限 如果不提供任何访问 ...

  8. list.get(0)防止NPE

    package com.chuangjin.p2p; import com.chuangjin.core.utils.JsonUtils; import java.util.ArrayList; im ...

  9. 微信小程序开发之搞懂flex布局4——Main Axis

    Main Axis——主轴 当flex-direction设置为row或row-reverse时,主轴的方向为水平方向.此时flex item为行内级元素. 当flex-direction设置为col ...

  10. php 批量下载文件

    public function batchDownload() { $filename = 'tmp.zip'; $zipName = date('YmdHi') . '.zip'; $files = ...