<!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. MYSQL数据类型和where条件判断

    MySQL中常见的数据类型 一.字符型 ① CHAR(N):固定N个字符长度的字符串,如果长度不够自动空格补齐; N的范围 0~255 ② VARCHAR(N): 存储可变长度的字符串,最常用 ③ T ...

  2. 【Android Developers Training】 107. 认知用户当前的行为

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

  3. JS实现全选、不选、反选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  4. SharePoint 2016 修改左上角连接

    SharePoint 2016默认会有左上角这样的一个功能.  估计都想把它改掉. 方法1: 打开,输入下面的命令,可将图中的sharepoint修改为想要的文字 $webapp = Get-SPWe ...

  5. 编写高质量代码改善程序的157个建议：第87个建议之区分WPF和WinForm的线程模型

    今天有时间了,继续<编写高质量代码改善程序的157个建议>的阅读,当我阅读到建议87的时候,里面的一些代码示例和文中所说的不一致了,是不是我现在用的是NetFramework 4.0的缘故 ...

  6. javascript运动框架（二）

    紧接着上面写的... 给div加一个边框,border:1px solid black window.onload = function(){      var div = document.getE ...

  7. Java 异常Exception e中e的getMessage()和toString()以及 e.printStackTrace();方法的区别

    Exception e中e的getMessage()和toString()方法的区别: 示例代码1: public class TestInfo {     private static String ...

  8. 使用C#在VS中开发：未处理AccessViolationException “System.AccessViolationException”类型的未经处理的异常

    未处理AccessViolationException: “System.AccessViolationException”类型的未经处理的异常在System.Data.dll中发生 其他信息:尝试读 ...

  9. 制作Docker镜像

    编写DockerFile 这个DockerFile是一个制作镜像的配方,用于描述这些文件,环境,和命令.在Linux.macOS的窗口终端中,或者windows的命令提示符下,执行下面的步骤,切记如果 ...

  10. 号称精通Java的你，是否真的名副其实

    慎用精通 随着猎头行业的兴盛,一些应聘者往往可以从猎头那得到一些注意事项和过往经验.比如,在简历中切不可随意用上"精通"二字,尤其对于刚入职场的小伙伴. 因为,对于应聘者写上精通和 ...