textarea使我们常常使用的一种表单形式，多用于大段文字的输入，大多数情况下，textarea都是可以满足需求的，但是当我们希望这个输入框高度自适应的时候，textarea就很难做到了。 ok，主角登场，html5中的 contenteditable 可以做到。

　   文档：　http://www.w3school.com.cn/tags/att_global_contenteditable.asp

　　即这个属性是直接添加在标签中的，属性值为true则为可编辑，属性值为false则为不可编辑。

　　下面的这段代码即可实现：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>contenteditable</title>

    <style>

        div.foo {

            width: 400px;

            min-height: 30px;

            max-height: 200px;

            outline: none;

            overflow-y: auto;

            border: thin solid red;

            padding:  5px;

        }

    </style>

</head>

<body>

    <div contenteditable="true" class="foo"></div>

</body>

</html>

　　即创建的这个div的宽度是固定的，高度最小值为30px，最大值为200px，outline设置为none，当高度超出时出现滚动条， 给一个红色的border，添加padding美化效果，最终展示如下：

　　可以看到， 这里当我们回车时就会创建一个新的div，并且在某些情况下会创建一个<br>标签。

　　那么我们可以通过使用正则表达式来去除之：

document.querySelector('.foo').innerHTML.replace(/<div>|<\/div>|<br>|&nbsp;/g, "");

　　这样得到的结果就是： "第一：这时非常好的一件事情。第二：不错。第三：JS一统天下。"

　　于是，我们就可以以此来提交表单了。

　　

　　但是，事情并没有这么简单，因为，通过尝试发现，这里不仅可以使用文本，还可以填充富文本，如下：

　  这时再用正则来处理就有问题了。

　  其实 contenteditable 提供的不仅仅是true和false，还可以使用 plaintext-only 作为值，如下：

 <div contenteditable="plaintext-only" class="foo"></div>

　　这样就既不用使用正则，也不需要担心富文本的输入了。

　　更多可以参考这篇文章：http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/

div实现高度自适应的textarea的更多相关文章

  1. 构造高度自适应的textarea

    高度自适应的textarea,这个需求还是比较常见的,随着用户的输入textarea的高度自动变化,这样输入较少的时候可以节省空间,输入多的时候可以不出现滚动条,让内容尽可能的展现在用户的视线内. 可 ...

  2. 里面的div怎么撑开外面的div,让高度自适应

    关于容器高度自适应的兼容性问题.1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-h ...

  3. 里面的div怎么撑开外面的div让高度自适应

    参考网址:http://www.jb51.net/css/140685.html 随着微软新操作系统的上市,ie6现在用的人越来越少了,但是XP系统看来是太过经典,仍然有相当多的用户在使用,且这部分人 ...

  4. Div中高度自适应增长方法

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. CSS: 解决Div float后，父Div无法高度自适应的问题

    在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...

  6. 上中下三个DIV，高度自适应（上高度固定，下固定，中间自适应）（代码来自X人）

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DivDemo.aspx.c ...

  7. 大div套多个小div，怎样设置外div的高度自适应？

    在最后一个div 后面加上 overflow:hidden;如下: <div style="width:580px; height:auto; margin:0 auto; <d ...

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

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

  9. textarea如何实现高度自适应（一）

    转自轩枫阁 - http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 方法一:div模 ...

随机推荐

  1. Thrift结构分析及增加取客户端IP功能实现

    目录 目录 1 1. 前言 1 2. 示例Service 1 3. 网络部分类图 2 4. 线程模式 3 4.1. IO线程 3 4.2. 工作线程 4 4.2.1. 工作线程类图 4 4.2.2.  ...

  2. B-spline Curves 学习前言与动机（1）

    B-spline Curves 学习之前言 本博客转自前人的博客的翻译版本,前几章节是原来博主的翻译内容,但是后续章节博主不在提供翻译,后续章节我在完成相关的翻译学习. (原来博客网址:http:// ...

  3. FIREDAC（DELPHI10 or 10.1）提交数据给ORACLE数据库的一个不是BUG的BUG

    发现FIREDAC(DELPHI10 or 10.1)提交数据给ORACLE数据库的一个不是BUG的BUG,提交的表名大小写是敏感的. 只要有一个表名字母的大小写不匹配,ORACLE就会认为是一个不认 ...

  4. C#动态编译引擎-CS-Script 简单使用

    Technorati 标记: cs-script 介绍可以参看  http://www.cnblogs.com/shanyou/p/3413585.html 还可以参看 这个  项目介绍 性能测试 c ...

  5. 在没Hadoop 、GP 前提下怎么进行实时数据统计。

    最近着手个项目,整体数据量有5亿多,每个月增量9000w.应用场景是Oltp 根据用户id直接计算各种维度值. 因为是Oltp 场景,直接根据用户id %2000分(方便后续横向扩展),有些喜欢扯分区 ...

  6. Buffer Pool--内存总结1

    物理地址空间是处理器用来访问位于总线上的所有部件的集合.在32位处理器上,地址总线为32位,寻址空间为4GB.在使用PAE的32位服务器上,地址总线为36位,寻址空间为64GB.在64位的处理器上生产 ...

  7. C# Using 开发随录

    Using 关键字有2个主要用途: 1.做为语句  用于定义一个范围,在此范围的末尾将释放对象 2.做为指令  用于为命名空间创建别名或导入其他命名空间中定义的类型 C# 通过 .NET Framew ...

  8. C#多边形求角——实例说

    前段时间有写过一个计算多边形角度的代码,这里给它整理整理,留给自己也送给萌新. 看左下图,这是一个多环的多边形,一个外环(内部为多边形内部区域),一个内环(外部为多边形内部区域),同时多边形中任意一个 ...

  9. NPOI+Json文件解析Excel

    记点笔记,加深印象!最近有个导入Excel工能需要完成,Excel列名是中文的,导入Excel我用的NPOI插件,如果不对Excel做解析,列名有可能会给我带来一些字符方面的麻烦,于是想到了一个比较l ...

  10. 如何修改Entity Framework Db Frist模式下的Entity继承关系？

    1.准备工作 Db Frist创建实体数据模型(创建edmx并不是重点,各位随意即可),此处取名ZeroCodeDB,所得文件如图所示:其中红框中的文件(ZeroCodeDB.tt)是各实体的生成的关 ...