变相实现textarea文本域
效果图:

html:
<div>
<form action="">
<div class="ta-div" contenteditable="true"><br /></div>
<input type="button" value="发布" class="mtb60 btn btn-lg cf bgc-52c4d5 pct40">
</form>
</div>
css:
.ta-div{
width: 100%;
min-height: 200px;
max-height: 400px;
height: 200px;
border: 1px solid #8b8b8b;
word-wrap: break-word;
overflow-y: auto;
}
.bgc-52c4d5 {
background-color: #52c4d5;
}
.cf {
color: #fff;
}
.mtb60 {
margin-top: 60px;
margin-bottom: 60px;
}
.pct40 {
width: 40%;
}
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
.btn {
display: inline-block;
font-weight:;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
}
变相实现textarea文本域的更多相关文章
- div模拟textarea文本域轻松实现高度自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Kindeditor富文本实现textarea文本域的上传及单独button 按钮绑定(用来实现单文件上传)
在最近项目要新增一个内容文章,文章包含一般的正文内容,其中正文中可以包含多张图片.文章最多包含一个音频文件.文章正文的上传功能我是通过textarea文本域绑定kindeditor编辑器实现的,而单独 ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- textarea文本域的高度随内容的变化而变化
用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } & ...
- textarea文本域轻松实现高度自适应
转载:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要些一个回复评论的页 ...
- css之——div模拟textarea文本域的实现
1.问题的出现: <textarea>标签为表单元素,但一般用于多行文本的输入,但是有一个明显的缺点就是不能实现高度自适应,内容过多就回出现滚动条. 为了实现高度自适应:用div标签来代模 ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- textarea文本域宽度和高度(width、height)自己主动适应变化处理
文章来源:http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html <HTML> <HEAD> <TITLE ...
- HTML学习笔记 域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例 第四节 (原创)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- SLAM数据集整理
New College Dataset :: Main / Downloads Autonomous Space Robotics Lab: Devon Island Rover Navigation ...
- GeoDesc: Learning Local Descriptors by Integrating Geometry Constraints
这篇论文提出了一种新的局部描述子学习方法,有一些点值得学习,记录下来以供参考.文章中涉及了一些3D reconstruction.structure from 的知识,不是很了解,所以理解可能有偏颇. ...
- 使用 ffmpeg nginx rtmp 搭建实时流处理平台
环境: ubuntu 16.04 问题引入: 使用 opencv 获取摄像头数据帧, 进行处理之后(如进行 keypoint 识别), 将 opencv 中图像的 Mat类型转化为 ffmpeg 的 ...
- 注解 java.lang.annotation.Inherited 介绍
在Spring Boot中大量使用了@Inherited注解.我们来了解一下这个注解的用法,注解的源码: package java.lang.annotation; /** * Indicates t ...
- 题解-SDOI2015 约数个数和
Problem bzoj3994 洛谷3327 题意:设 \(d(x)\) 为 \(x\) 的约数个数,给定 \(N,M\),求\(\sum_{i=1}^N\sum_{j=1}^Md(ij)\) \( ...
- hibernate学习笔记第七天:二级缓存和session管理
二级缓存配置 1.导入ehcache对应的三个jar包 ehcache/*.jar 2.配置hibernate使用二级缓存 2.1设置当前环境开始二级缓存的使用 <property name=& ...
- 竞赛常用STL备忘录
__builtin: __builtin_popcount:二进制中 1 的个数__builtin_ctz:末尾的 0,即对 lowbit 取log__builtin_clz:开头的 0,用 31 减 ...
- 打印机wifi
给人修理了半天共享打印机问题,连接不上,被共享机为32位xp系统,共享机为64位win7系统,共享时无法安装驱动,最后知道打印机具备连接wifi功能,然后用官网驱动连接打印机即可.out了,现在打印机 ...
- OpenStack实践系列③镜像服务Glance
OpenStack实践系列③镜像服务Glance 3.5 Glance部署 修改glance-api和glance-registry的配置文件,同步数据库 [root@node1 ~]# vim /e ...
- mysql5.7 闪回数据(update delete insert)
本次测试用Myflash闪回dml操作,有个前提条件是log_bin开启并且log模式是row: mysql> show global variables like "binlog%& ...