无意中看到一篇博客介绍了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. js 选择指定区域

    /根据id 选择特定区域function SelectRange(id) { var div = document.getElementById(id); var controlRange; if ( ...

  2. 转载 linux基本操作

    转载地址 https://segmentfault.com/a/1190000014840829 前言 只有光头才能变强 这个学期开了Linux的课程了,授课的老师也是比较负责任的一位.总的来说也算是 ...

  3. 编写一个javscript函数 fn，该函数有一个参数 n（数字类型），其返回值是一个数组，该数组内是 n 个随机且不重复的整数，且整数取值范围是 [2, 32]。

    function fn(n){ if(n<2 || n>32) { return; }  if(!n) { return;}  //判断n是否为数字  if(!/^[0-9]+.?[0-9 ...

  4. PNP的学习-EPNP

    EPNP主要是利用已知的3d点,通过PCA选择4个控制点,建立新的局部坐标系,从而将3d坐标用新的控制点表示出来. 然后,利用相机投影模型和2d点,转换到相机坐标系中,再在相机坐标系中建立和世界坐标系 ...

  5. H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作

    今天的目标 3.1:canvas绘图--(重点掌握:渐变对象.路径.图片.变形) 3.2:canvas绘图--渐变对象 线性渐变: linearGradient 径向渐变: var g = ctx.c ...

  6. JQUERY-事件-动画-类数组对象-添加自定义API

    正课: 1. 事件: 2. 动画: 3. 类数组对象操作: 4. 添加自定义API: 1. 事件: 1. 页面加载后执行: 2个时机 1. DOM内容加载完成: 仅包括html, js DOMCont ...

  7. tensorflow学习之（十一）将python代码写入文件

    #save to file import tensorflow as tf import numpy as np ##(1)Save to file 把相关变量存储到文件中 #remember to ...

  8. P3398 仓鼠找sugar (一道LCA的裸题)

    https://www.luogu.org/problemnew/show/P3398 题意简单概括一下就是求树上两条路径是否相交; 有这样一个性质: if相交,则必有lca(a,b) 在路径c &l ...

  9. Java集合不能存放基本数据类型

    Java集合不能存放基本数据类型,只能存放对象的引用. 每个集合元素都是一个引用变量,实际内容都存放在堆内或方法区里面, 但是基本数据类型是在栈内存上分配空间的,栈上的数据随时会被收回. 如何解决? ...

  10. Win7 VS2017编译Godot3.0.2和2.1.4

    千呼万唤屎出来,Godot终于发布3.0版本的源码了,今天是2018年3月17日,自去年接触过后,一直没事就刷刷Gayhub,看看3.0什么时候更新,刷了一年也没结果. 今天上Youtube无意中搜了 ...