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模 ...
随机推荐
- Oracle学习笔记(十三)
十四.触发器(监听数据操作的工具) 1.什么是触发器? 数据库触发器是一个与表相关联的.存储的PL/SQL程序 作用: 每当一个特定的数据操作语句(insert.update.delete)在指定的表 ...
- curl：get，post 以及SoapClien访问webservice数据
一.curl get模式 public function close_order(){ $url="http://192.168.2.50:7777/U8API.asmx?op=Insert ...
- Appium之连续启动多个应用（APP）
我们知道Appium应用启动时自带的caps可以先行启动某个应用(基于appPackage和appActivity),那么如何用其连续启动多个应用呢? 这里就需要用到start_activity()方 ...
- 软件项目第一个Sprint评分
第一组 跑男 跑男组他们设计的是极速蜗牛小游戏,他们的界面背景图片做的挺漂亮,现在为止也实现了大部分功能, 但是我没有太听懂他们的游戏规则. 因为蜗牛出发后,每次碰到屏幕边缘后都会有确定的反弹结果,也 ...
- 工作中经常打交道的Java代码の容器（一）
- Oracle EBS Export File Format
Profile Option Name Site Application Responsibility Server Server Org User Remark Export MIME type t ...
- Intellij IDEA如何在一个窗口同时打开多个Maven项目
建立父目录,比如fatherProject,并将多个项目放入该父目录fatherProject下 File-Open...打开父目录fatherProject 引入pom.xml,打开Maven Pr ...
- 热更新(一) 之Lua语法的学习
热更新 如热更新果需要更换UI显示,或者修改游戏的逻辑,这个时候,如果不使用热更新,就需要重新打包,然后让玩家重新下载(浪费流量和时间,体验不好).热更新可以在不重新下载客户端的情况下,更新游戏的内容 ...
- JAVA实现长连接(含心跳检测)Demo
实现原理: 长连接的维持,是要客户端程序,定时向服务端程序,发送一个维持连接包的. 如果,长时间未发送维持连接包,服务端程序将断开连接. 客户端: Client通过持有Sock ...
- MyBatis高级及其SSM框架搭建
代码生成器 首先meaven项目中导入支持包 <dependencies> <!-- https://mvnrepository.com/artifact/mysql/mysql-c ...