效果图:

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文本域的更多相关文章

  1. div模拟textarea文本域轻松实现高度自适应

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Kindeditor富文本实现textarea文本域的上传及单独button 按钮绑定(用来实现单文件上传)

    在最近项目要新增一个内容文章,文章包含一般的正文内容,其中正文中可以包含多张图片.文章最多包含一个音频文件.文章正文的上传功能我是通过textarea文本域绑定kindeditor编辑器实现的,而单独 ...

  3. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  4. textarea文本域的高度随内容的变化而变化

    用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } & ...

  5. textarea文本域轻松实现高度自适应

    转载:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要些一个回复评论的页 ...

  6. css之——div模拟textarea文本域的实现

    1.问题的出现: <textarea>标签为表单元素,但一般用于多行文本的输入,但是有一个明显的缺点就是不能实现高度自适应,内容过多就回出现滚动条. 为了实现高度自适应:用div标签来代模 ...

  7. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  8. textarea文本域宽度和高度(width、height)自己主动适应变化处理

    文章来源:http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html <HTML> <HEAD> <TITLE ...

  9. HTML学习笔记 域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例 第四节 (原创)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 安装mysql8.0.12以及修改密码和Navicat的连接

    mysql8.0+与安装其他版本不同一.安装mysql8.0.121.到官网https://www.mysql.com/  下载mysql-8.0.12-winx64.zip(不要.mis),直接解压 ...

  2. oracle查询语句 select a||','||b||','||c from table where a in('m','n')

    查询table表中 字段a = m 或 n 时,a列,b列,c列的值,并且这三列之间用 ","(逗号)分割. 追问:连接符的作用呢?就是显示的时候链接abc和中间的逗号么?追答:| ...

  3. linux查看日志

    若想在linux下查询某个时间段的log,用sed命令示例如下: $ sed -n '/2017-11-11 11:00:00/,/2017-11-11 11:11:11/p'  error.log ...

  4. P4001 [ICPC-Beijing 2006]狼抓兔子

    题目地址:P4001 [ICPC-Beijing 2006]狼抓兔子 平面图 边与边只在顶点相交的图. 对偶图 对于一个平面图,都有其对应的对偶图. 平面图被划分出的每一个区域当作对偶图的一个点: 平 ...

  5. 华为QUIDWAY系列交换机的console重置

    作者:邓聪聪 华为QUIDWAY系列交换机的console重置 这里以华为QUIDWAY S3700密码清除为例: 各位看官请自行注意,这是两个不同版本设备的重置方法. 一:方法1 首先在电脑上新建一 ...

  6. expect学习笔记及实例详解

    因为最近正在学习expect脚本,但是发现网上好多文章都是转载的,觉得这篇文章还不错,所以简单修改之后拿过来和大家分享一下~ 1. expect是基于tcl演变而来的,所以很多语法和tcl类似,基本的 ...

  7. mongodb3.4.6配置主从

    .rpm包安装mongodb3.4.6 下载地址:https://repo.mongodb.org/yum/redhat/7/mongodb-org/3.4/x86_64/RPMS/ rpm -ivh ...

  8. MySQL高可用方案-PXC(Percona XtraDB Cluster)环境部署详解

    MySQL高可用方案-PXC(Percona XtraDB Cluster)环境部署详解 Percona XtraDB Cluster简称PXC.Percona Xtradb Cluster的实现是在 ...

  9. .NET基础之this关键字

    1.限定类似名称隐藏的成员 public Employee(string name, string alias) { // Use this to qualify the fields, name a ...

  10. Django 自定义模型管理器类2个应用场景

    class BookManager(models.Manager): # 改变查询集的结果集 def all(self): books = super().all() # QuerySet books ...