div实现高度自适应的textarea
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>| /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的更多相关文章
- 构造高度自适应的textarea
高度自适应的textarea,这个需求还是比较常见的,随着用户的输入textarea的高度自动变化,这样输入较少的时候可以节省空间,输入多的时候可以不出现滚动条,让内容尽可能的展现在用户的视线内. 可 ...
- 里面的div怎么撑开外面的div,让高度自适应
关于容器高度自适应的兼容性问题.1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-h ...
- 里面的div怎么撑开外面的div让高度自适应
参考网址:http://www.jb51.net/css/140685.html 随着微软新操作系统的上市,ie6现在用的人越来越少了,但是XP系统看来是太过经典,仍然有相当多的用户在使用,且这部分人 ...
- Div中高度自适应增长方法
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- CSS: 解决Div float后，父Div无法高度自适应的问题
在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...
- 上中下三个DIV，高度自适应（上高度固定，下固定，中间自适应）（代码来自X人）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DivDemo.aspx.c ...
- 大div套多个小div，怎样设置外div的高度自适应？
在最后一个div 后面加上 overflow:hidden;如下: <div style="width:580px; height:auto; margin:0 auto; <d ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- textarea如何实现高度自适应（一）
转自轩枫阁 - http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 方法一:div模 ...
随机推荐
- OpenGL中的像素包装理解
OpenGL中的像素包装理解 像素包装 位图和像素图很少会被紧密包装到内存中.在许多硬件平台上,考虑到性能的原因位图和像素图的每一行的数据会从特殊的字节对齐地址开始.绝大多数编译 器会自动把变量和缓冲 ...
- polymer-developer guide-registration and lifecycle
注册和声明周期 my = Polymer({ is: "proto-element", created: function() { this.innerHTML = 'create ...
- Oracle EBS Request Status: Pending
如果提交请求以后,状态一直是pending状态,可以在"工具"打开"Manager",查看一下Maximum是否有设置错,另外pending的数量当前是多少. ...
- [C#]DES再一例(转)
public class Encrypt { internal string ToEncrypt(string encryptKey, string str) { try { byte[] P_byt ...
- TFS 2015新功能之一，当前迭代查询标记
TFS 2015发布在即,有幸作为MVP提前获得了TFS的RTM版本,下面就TFS 2015的新功能做一些介绍: TFS 2015新功能之一,当前迭代查询标记 在TFS的查询中,可以将" ...
- Excel2010画动态甘特图
哈哈!你居然真的看简介点进来啦,我也想八一八Henry gantt本人的故事,可是我查了好些资料,一个槽点都没有发现,不过人生经历还是蛮拼的: 此人活了58年,前半生就是一个中规中距的机械工程师&am ...
- EasyUi控件Datagrid
很久没有打开我的博客园,刚刚大概扫了一眼我之前写的笔记,关于Devexpress那篇居然有四千多的浏览记录,不知道对浏览过的博友有没有起到一点点作用.当然我写笔记仅仅只是给自己留个记忆,如果歪打正着帮 ...
- Impala源码之资源管理与资源隔离
本文由 网易云发布. 前言 Impala是一个MPP架构的查询系统,为了做到平台化服务,首先需要考虑就是如何做到资源隔离,多个产品之间尽可能小的甚至毫无影响.对于这种需求,最好的隔离方案无疑是物理机 ...
- django系列8.3.2--django中间件实现登录验证(2) 个人构想逻辑
middleware.py from django.utils.deprecation import MiddlewareMixin from django.shortcuts import rend ...
- 数据库访问接口(ODBC、OLE DB、ADO)
最近在学C#的数据库编程,对于数据库接口技术这块的知识一直比较模糊,网上查了不少资料,看了几天还是朦朦胧胧的,只能做些笔记再研究了. 我们都知道,“数据库”是指一组相关信息的集合,最早的计算机应用之一 ...