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. [转]WCF体系结构-一张图就是好

    本文转自:http://www.cnblogs.com/snakevash/archive/2011/05/02/2034414.html 今天在MSDN上面看到了这么一张图,让我顿时感觉脑袋清醒很多 ...

  2. 好用的开关按钮——switchbutton

    1.简介 GitHub地址:https://github.com/zcweng/SwitchButton gradle:  repositories { mavenCentral() jcenter( ...

  3. DNS本机可解析，其他主机通过本机无法解析问题

    新建了一个redhat虚拟机,将此虚拟机作为dns服务器使用,配置完以后宿主机的dns服务器设置为配置好的虚拟机地址,结果总是显示no Server Reached,没有服务器可以到达,花了很长时间终 ...

  4. C# 使用dynamic类型来访问JObject对象

    dynamic是C#里面的动态类型,可在未知类型的情况访问对应的属性,非常灵活和方便. 使用Json.Net可以把一个Json字符串转换成一个JObject对象,如果有已知强类型,如果有已知对应的强类 ...

  5. @componentscan注解的用法和作用

    刚刚开始学习spring boot,在application中忘记加上@componentscan,倒置web请求一直没有都是404,@componentscan的作用如下: @ComponentSc ...

  6. 2-初步了解C#-类与对象

    本篇博客对应视频讲解 回顾 我们在第一篇文章中讲了编程中最基本的内容,如输入输出.字符串处理.数字类型计算.分支及循环结构等.无论学习什么语言,这些内容都是相通的. 本篇博客主要演示列表(List)的 ...

  7. [uwp]数据绑定再学习

    在开始上代码前,先来假设这样一种情形: 出于某些原因,创建一个自定义控件(UserControl),然后为它定义一个依赖属性,这个属性有两个作用,一是调用控件方通过数据绑定技术为它赋值,二是控件内部的 ...

  8. [mvc]记一次“项目”的历程

    大二上半学期因为选修课的原因,答应帮老师完善学院的选课系统.在这之前没有做过一个可以成为“项目”的项目,本着挑战自己的原则和可以不上选修课的福利,断断续续用了一学期的时间来完善这个选课系统. 接受这个 ...

  9. pageadmin CMS网站建设教程：网页设计的常用参数

    由于网络速度问题,我们需要考虑图片大小对传输速度的影响,如果图片太大就会影响浏览速度,访问者很快就会对这个网站失去了兴趣,只有充分了解图片质量与下载速度的关系,并了解不同的文件格式,才能更有效的表达内 ...

  10. Android 获取 content layout

    if (findViewById(android.R.id.content) instanceof ViewGroup) { ViewGroup mainView = ((ViewGroup)find ...