<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>div模拟textarea文本域轻松实现高度自适应</title>

<style>

h2 {

text-align: center;

margin: 50px auto;

}

.test_box {

width: 400px;

min-height: 20px;

max-height: 50px;

_height: 120px;

margin-left: auto;

margin-right: auto;

padding: 6px;

outline: 0;

border: 1px solid #a0b3d6;

font-size: 14px;

line-height: 20px;

/*padding: 2px;*/

word-wrap: break-word;

overflow-x: hidden;

overflow-y: auto;

border-radius: 4px;

border-color: rgba(82, 168, 236, 0.8);

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);

}

</style>

</head>

<body>

<h2>div模拟textarea文本域轻松实现高度自适应</h2>

<div class="test_box" contenteditable="true"><br /></div>

</body>

</html>

本文地址：http://www.zhangxinxu.com/wordpress/?p=1362

div模拟textarea文本域轻松实现高度自适应的更多相关文章

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

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

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

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

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

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

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

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

  6. textarea文本域宽度和高度（width、height）自己主动适应变化处理

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

  7. textarea文本域宽度和高度width及height自动适应实现代码

    <HTML> <HEAD> <TITLE>textarea宽度.高度自动适应处理方法</TITLE> <!-- 控制宽度的自动适应 --> ...

  8. DIV仿textarea文本域，contenteditable如何只能输入纯文本

    对于支持HTML5浏览器有2种方法: 1. HTML5 <div contenteditable="plaintext-only"></div> 2.  C ...

  9. div模拟textarea自适应高度

    之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...

随机推荐

  1. jquery $.each 和for 怎么跳出循环

    jquery $.each 和for 怎么跳出循环 1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环.2.而在jquery中 $.each则对应的使用r ...

  2. JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题

    前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案  JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bo ...

  3. 【Android Developers Training】 87. 序言：同步到云

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  4. Oracle 使用命令导入dmp文件

    若要导入到特定的表空间则需要新建表空间,若不要求,则用已有的,则只需执行下面的步骤 在dos窗口中输入imp 用户名/密码@ip地址:端口号/数据库实例 file='需要导入的dmp文件的路径' fu ...

  5. mysql中的limit

    mysql中常使用limit做分页查询,使用方法也很简单: SELECT * FROM table LIMIT [offset,] rows #注: offset-偏移量,rows查询返回的行数 -- ...

  6. 接口开发，tp5结合swagger-ui安装方法

    今天看到老java用的swagger提供接口,美观好用,方便维护,不是写好接口之后再写接口文档,麻烦的要死.网上找了找结合php的方法,在此记录一下,以后再开发接口就可以方便很多了. Swagger的 ...

  7. Javassist进行方法插桩

    javassist官网 http://jboss-javassist.github.io/javassist/ javassist API网 http://jboss-javassist.github ...

  8. Spring ContentNegotiatingViewResolver

    1. Spring 返回视图采用了ViewResolver,如果一般是jsp的话,可以采用InternalResourceViewResolver. 2.还可以通过ContentNegotiating ...

  9. DotNetCore跨平台~发布脚本PowerShell的设计

    回到目录 这几天对PS情有独忠,被它的强大功能所希引,它可以快速部署,快速发布,将一些连带的动作一次的完成,挺方便,类似于早期的bat文件,也像linux平台的bash脚本,但功能上,比前两者都要强很 ...

  10. Java虚拟机：内存模型详解

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 我们都知道,当虚拟机执行Java代码的时候,首先要把字节码文件加载到内存,那么这些类的信息都存放在内存中的哪个区域呢?当我们创建一个对象实 ...