效果图:

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. Tesseract识别图片提取文字&字库训练

    文中测试了3.0和4.0两个版本.发现3.0识别效率不准确,需要训练词库.4.0识别效率就比较高了,而且支持结果生成pdf.txt等格式.所以推荐使用4.0版本. 这个工具可以用在爬虫的时候获取验证码 ...

  2. PTA L1题目合集(更新至2019.3)

    L1-001 Hello World (5 分) 链接:https://pintia.cn/problem-sets/994805046380707840/problems/9948051471320 ...

  3. C++ 解析Json——jsoncpp

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,和xml类似,本文主要对VS2008中使用Jsoncpp解析json的方法做一下记录.Jsoncpp是个跨 ...

  4. 题解-ZeroJudge-c686 高斯符號

    Problem ZeroJudge Solution 考慮到\(\lfloor \frac {km}n\rfloor\)等同於\(km\)整除\(n\),換種表示方法就是\(km\)減去\(km\)模 ...

  5. redhat yum

    背景 这个redhat可让我好一顿折腾,对于这个yum的安装,如果成功则罢,不成功可有的收拾的.还是centos比较好啊. 转载 1 下载下面四个软件包(可以从163下载,版本号自己搜索) wget ...

  6. 006_理解inode

    inode是一个重要概念,是理解Unix/Linux文件系统和硬盘储存的基础. 我觉得,理解inode,不仅有助于提高系统操作水平,还有助于体会Unix设计哲学,即如何把底层的复杂性抽象成一个简单概念 ...

  7. hostapd中扫描的调用过程

    扫描结果获取supplicant_event(EVENT_SCAN_RESULTS)wpa_supplicant_event_scan_results_wpa_supplicant_event_sca ...

  8. Light Oj 1003

    题意 : 给你m个二元关系, 问是否可以确定各个节点的先后关系: 思路: 拓扑排序, 判断是否有环: #include<bits/stdc++.h> using namespace std ...

  9. python之numpy包知识要点总结

    一.简介 numpy主要是用来存储和处理大型矩阵,提供了一种存储单一数据类型的多维数组对象------ndarray.还提供了多种运算函数,能够完成数据计算和统计分析,是数据分析的重要工具包. 二.数 ...

  10. table中border-collapse的问题

    在table中,如果设置了border-collapse: collapse;,边框会合并,这时你修改top或bottom的颜色,会有问题 解决办法是:border-collapse: separat ...