<!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. Centos6.5 源码编译安装 Mysql5.7.11及配置

    安装环境 Linux(CentOS6.5 版).boost_1_59_0.tar.gz.mysql-5.7.11.tar.gzMySQL 5.7主要特性:    更好的性能:对于多核CPU.固态硬盘. ...

  2. Kotlin基本语法和使用

    Kotlin 是一个基于 JVM 的新的编程语言,由 JetBrains 开发.与Java相比,Kotlin的语法更简洁.更具表达性,而且提供了更多的特性. Kotlin是使用Java开发者的思维被创 ...

  3. 【LeetCode】327. Count of Range Sum

    题目: Given an integer array nums, return the number of range sums that lie in [lower, upper] inclusiv ...

  4. 12.js如何将明文转为MD5

    1.先下载MD5.JS 2.引入,使用hex_md5(str)即可

  5. 再谈AbstractQueuedSynchronizer：基于AbstractQueuedSynchronizer的并发类实现

    公平模式ReentrantLock实现原理 前面的文章研究了AbstractQueuedSynchronizer的独占锁和共享锁,有了前两篇文章的基础,就可以乘胜追击,看一下基于AbstractQue ...

  6. 【原】Sql Server 2008---安装时卸载Visual Studio

    由于数据库连接不上,所以卸载数据库,然后安装的时候出问题报错,结果是因为vs, 所以就有了卸载vs这一步.某些图片借用一下. 1. 打开电脑中的控制面板--程序和功能 2.找到要卸载的软件,但是卸载过 ...

  7. 使用ReflectionToStringBuilder实现toString方法

    使用ReflectionToStringBuilder实现toString方法 org.apache.commons.lang.builder.ReflectionToStringBuilder是co ...

  8. java使用Junit工具进行单元测试

    目录 1.类的定义: 2.Junit工具的使用: 3.对该类进行单元测试并查看结果: 4.记录各个阶段的时间 5.将过程记录在个人博客上(github地址) 1.类的定义:类是同一事物的总称,类是封装 ...

  9. git命令小结

    注: 如果你使用Windows系统,为了避免遇到各种莫名其妙的问题,请确保目录名(包括父目录)不包含中文 学习git文档推荐:http://www.liaoxuefeng.com/wiki/00137 ...

  10. mysql5.6 无法使用64odbc连接

    win10 64位,mysql5.6 无法使用64 连接odbc,处理:装32位odbc, 使用C:\Windows\SysWOW64\odbcad32.exe 配置.