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模 ...
随机推荐
- ISO in CSS content
Name Numeric Description Hex ISO in CSS content Octal no-break space %A0 p:before { content: ...
- testNG的高级用法 --DataProvider
@DataProvider Method参数 数据提供者的第一个参数是java.lang.reflect.Method,TestNG传递这个将调用的测试方法.如果您希望数据提供者根据不同的测试方法返回 ...
- 【题解】 UVa11210 Chinese Mahjong
pdf传送门 直接模拟+搜索,考虑一下选哪一个是将,然后搜出顺子和刻子,最后判断一下可不可行就好了! #include<stdio.h> #include<string.h> ...
- iOS Keychain 跨应用
Keychain 可以用来持久保存一些信息.通常每个应用都有自己的 Keychain Access.但有时你会需要多个应用共用一些信息.这时需要创建 Keychain Access Group. Ke ...
- ceph: health_warn clock skew detected on mon的解决办法
造成集群状态health_warn:clock skew detected on mon节点的原因有两个,一个是mon节点上ntp服务器未启动,另一个是ceph设置的mon的时间偏差阈值比较小. 排查 ...
- 配置AndroidStdio的开发环境
http://blog.csdn.net/siwuxie095/article/details/53431818
- ADV三星
#include <iostream> using namespace std; #define SIZE 12 int data[SIZE]; int data1[SIZE]; int ...
- PHP 代码优化测试【Benchmark数据测试】
由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 : --> 点击这里 Benchmark测试之前我们先来了解Benchmark.直接下载:ht ...
- 爬取lol皮肤
#!/usr/bin/python # -*- coding: utf-8 -*- # data:2018-11-23 # user:fei import re import requests imp ...
- 2018 OCP 052最新题库及答案-4
4.For which requirement should you configure shared servers? A) accommodating an increasing number o ...