<textarea> 标签定义一个多行的文本输入控件。但是它不能像div一样随着内容增加而自动增加,一言不合就出现滚动条,有是有为了更好的交互,可能需要使用div来模拟textarea的实现,直奔主题吧。

1、内容可编辑 contenteditable

对就是contenteditable,给div添加contenteditable=true即可;

2、demo

//css
div{
width: 400px;
min-height: 100px;
max-height: 300px;
_height: 100px; //IE6
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto; //超过最大高度就出现滚动条
_overflow-y: visible;
} //html
<div contenteditable="true">
.....此处省略.....
</div>

  

用一个div模拟textarea的实现的更多相关文章

  1. 用一个div模拟textarea并实现高度自适应

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  2. div模拟textarea以实现高度自适应实例页面

    作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...

  3. H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长)

    无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...

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

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

  5. div模拟textarea自适应高度

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

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

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

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

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  9. div模拟textarea

    有些Weber可能没有用过contenteditable这个属性,如果想编辑一个DIV里面的内容,这个属性是一个非常不错的选择   <div contenteditable="true ...

随机推荐

  1. javascript学习(3)循环和判断

    continue:: break:: 一.for循环 1.for(i=1;i<6;i++)循环 2.for(x in jsonObject)循环 二.while循环 1.while循环 2.do ...

  2. spring-oauth-server实践:access_token的有效期分析

    1.access_token有效期检查 用expiration和new Date()比较!!!!!! 分析目标-->expiration什么时候设置,设置规则如何配置!!!!!!! 2.acce ...

  3. OAuth2.0学习(1-13)oauth2.0 的概念:资源、权限(角色)和scope

    mkk 关于资源的解释 : https://andaily.com/blog/?cat=19 resource用于将系统提供的各类资源进行分组管理, 每一个resource对应一个resource-i ...

  4. 用js来实现那些数据结构(数组篇03)

    终于,这是有关于数组的最后一篇,下一篇会真真切切给大家带来数据结构在js中的实现方式.那么这篇文章还是得啰嗦一下数组的相关知识,因为数组真的太重要了!不要怀疑数组在JS中的重要性与实用性.这篇文章分为 ...

  5. Collection集合框架详解

    [Java的集合框架] 接口: collection      map list     set 实现类: ArryList   HashSet HashMap LinkList   LinkHash ...

  6. 初级 Java 的 3 本进阶书

    1.Head First设计模式 这是我看过最幽默最搞笑最亲切同时又让我收获巨大的技术书籍!深入浅出,娓娓道来,有的地方能笑死你! 翻开一看,真如Erich Camma所说,简直欲罢不能.本书是Ore ...

  7. 遗传算法详解(LINGO及MatlabGA工具箱求解实现)

    遗传算法 1.前言 遗传算法是一种基于生物界自然群体遗传进化机制的自适应全局优化概率搜索算法.它与传统算法不同,不依赖梯度信息,而是通过模拟自然进化过程来搜索最优解. 例子:兔子的遗传进化 有人说,现 ...

  8. 对于手机APP偷窥个人隐私,你怎么看

    经过进两周的持续发酵,Facebook5000万用户数据泄露事件,已让其处在舆论的风尖浪口.对于手机APP泄漏用户个人隐私问题,再次受到人们的关注.对于这个问题,你会怎么看? 隐私,即不愿公开的个人信 ...

  9. [LeetCode] Continuous Subarray Sum 连续的子数组之和

    Given a list of non-negative numbers and a target integer k, write a function to check if the array ...

  10. php array_multisort函数实现按某一字段对二维数组进行排序

    在工作中碰到一个页面如表格似的展示多条数据,要求根据其中的修改时间对数据进行排序, 数据格式类似于 $a = array( 0=>array( editTime=>'' addTime=& ...