效果图:

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. [转] 深入理解Batch Normalization批标准化

    转自:https://www.cnblogs.com/guoyaohua/p/8724433.html 郭耀华's Blog 欲穷千里目,更上一层楼项目主页:https://github.com/gu ...

  2. platform模块

    import platform ''' python中,platform模块给我们提供了很多方法去获取操作系统的信息 如: import platform platform.platform() #获 ...

  3. 876. Middle of the Linked List

    1. 原始题目 Given a non-empty, singly linked list with head node head, return a middle node of linked li ...

  4. jQuery插件开发jQuery.extend(object)和jQuery.fn.extend()

    jQuery插件开发 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可 ...

  5. 【OpenCV】SIFT原理与源码分析:DoG尺度空间构造

    原文地址:http://blog.csdn.net/xiaowei_cqu/article/details/8067881 尺度空间理论   自然界中的物体随着观测尺度不同有不同的表现形态.例如我们形 ...

  6. 使用Navicat为MySQL建立定时任务

    1.编写好每个小时需要指定的sql语句,我一般都是编写的一个update SQL,也可以编写好一个函数存储过程 2.点击事件,可能回看到一些事件列表,然后点击上方的“新建事件”,会打开一个事件定义框( ...

  7. maven:手动安装JAR到本地仓库

    mvn install:install-file -DgroupId=com.test -DartifactId=test -Dversion=1.0.0 -Dpackaging=jar -Dfile ...

  8. python学习第42、43天 HTML\CSS

    前端是什么? 帮助不了解后端程序的客户轻松使用程序的工具,可以提升工作效率,提供各种各样的体验. 通用的前端大致会使用三种语言,用在三个不同的方面对前端进行架构和优化,这里也只介绍这三种 web前端常 ...

  9. push to origin/master was rejected错误解决方案

    idea中,发布项目到OSChina的Git中,当时按照这样的流程添加Git,然后push,提示:push to origin/master war rejected". 解决方案如下: 1 ...

  10. 【进阶3-5期】深度解析 new 原理及模拟实现(转)

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://github.com/yygmind/blog/issues/24 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的 ...