今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法……

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

看到这句话我感觉……It's all

简单的介绍一下contenteditable:规定是否可编辑元素的内容。

属性值:true:表示可编辑元素;

    false: 表示不可编辑元素;

    classname:继承父元素的contenteditable。

有了这个属性,可编辑的标签就不再是input和textarea了,p元素、div元素等等都是可以编辑的。

接下来我们只需要设置这个div的宽度和最小高度就能够实现自适应了。当然你要为div加一个border,避免我们找不到它。

这让我深深地感觉到了学以致用的重要性,以此共勉。

div仿textarea使高度自适应的更多相关文章

  1. div模拟textarea且高度自适应

    需求 我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度, ...

  2. textarea下高度自适应

    1,背景:textarea的高度不会随内容的增加而自适应,会出现滚动条 解决方案: 1)使用div模拟textarea  使用h5的属性    <div contenteditable=&quo ...

  3. div模拟textarea实现高度自增长

    今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...

  4. DIV+CSS左右列高度自适应问题

    其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom: ...

  5. textarea实现高度自适应

    css部分 #textarea { display: block; margin:0 auto; overflow: hidden; width: 550px; font-size: 14px; he ...

  6. div仿textarea可输入

    原本要用textarea,但是后来发现好像只有IE支持textarea里边使用html标签,由于需要在textarea中显示一条横线(<hr />),在网上查了很久,都说textarea是 ...

  7. div仿textarea

    CSS代码: .test_box { width: 400px; min-height: 120px; max-height: 300px; _height: 120px; margin-left: ...

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

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

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

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

随机推荐

  1. Android 死锁和重入锁

    死锁的定义: 1.一般的死锁 一般的死锁是指多个线程的执行必须同时拥有多个资源,由于不同的线程需要的资源被不同的线程占用,最终导致僵持的状态,这就是一般死锁的定义. package com.cxt.t ...

  2. 图解Spark API

    初识spark,需要对其API有熟悉的了解才能方便开发上层应用.本文用图形的方式直观表达相关API的工作特点,并提供了解新的API接口使用的方法.例子代码全部使用python实现. 1. 数据源准备 ...

  3. bzoj1531: [POI2005]Bank notes

    Description Byteotian Bit Bank (BBB) 拥有一套先进的货币系统,这个系统一共有n种面值的硬币,面值分别为b1, b2,..., bn. 但是每种硬币有数量限制,现在我 ...

  4. Lesson 22 A glass envolops

    Text My daughter, Jane, never dreamed of receiving a letter from a girl of her own age in Holland. L ...

  5. Ubuntu部署python3.5的开发和运行环境

    Ubuntu部署python3.5的开发和运行环境 1 概述 由于最近项目全部由python2.x转向 python3.x(使用目前最新的 python3.5.1) ,之前的云主机的的默认python ...

  6. (转)使用 SCons 轻松建造程序

    在软件项目开发过程中,make 工具通常被用来建造程序.make 工具通过一个被称为 Makefile 的配置文件可以自动的检测文件之间的依赖关系,这对于建造复杂的项目非常有帮助,然而,编写 Make ...

  7. 镜像切换Logreader Agent报错:分发数据库中可能存在不一致的状态(续)

    报错: 分发数据库中可能存在不一致的状态: dist_backup_lsn {00000030:000001ba:0004},dist_last_lsn {00000030:000001cd:0004 ...

  8. [翻译]AKKA笔记 - ACTOR生命周期 - 基本 -5

    原文地址:http://rerun.me/2014/10/21/akka-notes-actor-lifecycle-basic/ (请注意这了讨论的生命周期并不包括 preRestart 或者pos ...

  9. 用VB脚本批到导入字段到PowerDesigner

    在PowerDesigner使用脚本批量导入excel中记录的表结构信息,由于需要通过powerdesigner逆向工程创建一些sybase IQ的表,由于是接口数据,只有excel表,手动导入太耗时 ...

  10. backup4:数据库自动备份,自动删除备份文件

    一:手写TSQL 脚本 1,自动备份 每周进行一次Database 的 Full Backup,设置 Schedule Interval 为Weekly use master go ) )+N'.ba ...