<!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. 前端如何将H5页面打包成本地app？

    大家都知道H5页面怎么在手机浏览器里测试,但是如何能打包成APP测试呢?因为本人的手机是IOS系统,如果用Xcode打包需要开发证书,貌似99美元一年.意外发现一个叫Hbuild的软件,简单好用,下面 ...

  2. Ionic Demo 解析

    Ionic Demo 解析 index.html 解析 1.引入所需要的类库 <link rel="manifest" href="manifest.json&qu ...

  3. 自定义MapReduce中数据类型

    数据类型(都实现了Writable接口) BooleanWritable 布尔类型 ByteWritable 单字节数值 DoubleWritable 双字节数值 FloatWritable 浮点数 ...

  4. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

  5. Elasticsearch学习随笔（二）-- Index 和 Doc 查询新建API总结

    本文着重总结Elasticsearch的常见API了,进行分析. Index API 初始化Index,设置shards和replica PUT http://localhost:9200/firew ...

  6. Html 学习

    行内元素和块级元素 行内元素(行级元素) 多个元素会在一行内显示 块级元素 独立成行 注意:块级元素能够嵌套行内元素 <div> <span></span> < ...

  7. HDU 1698 Just a Hook（线段树成段更新）

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=1698 题目: Problem Description   In the game of DotA, P ...

  8. 使用random输出10个double型的随机数

    使用random输出10个double型的随机数 代码如下: package Day05;import java.util.Random;import java.util.Scanner; publi ...

  9. Longest Palindromic Substring - 字符串中最长的回文字段

    需求:Given a string S, find the longest palindromic substring in S. You may assume that the maximum le ...

  10. Java之异常处理，日期处理

    Java异常处理 异常:异常就是Java程序在运行过程中出现的错误. 异常由来:问题也是现实生活中一个具体事务,也可以通过java 的类的形式进行描述,并封装成对象.其实就是Java对不正常情况进行描 ...