<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. Mego开发文档 - 数据注释建模

    数据注释建模 Mego框架使用一组约定来基于CLR类来构建模型.您可以指定其他配置来补充或覆盖通过约定发现的内容. 在 Mego 中所有的数据对象必须要有主键.这里需要声明与EF不同的是框架只支持数据 ...

  2. sql优化基础篇

    优化的步骤: 0.先sql运行看看是否真的很慢,注意设置SQL_NO_CACHE 1.where条件单表查,锁定最小返回记录表.这句话的意思是把查询语句的where都应用到表中返回的记录数最小的表开始 ...

  3. 深入了解GOT,PLT和动态链接

    之前几篇介绍exploit的文章, 有提到return-to-plt的技术. 当时只简单介绍了 GOT和PLT表的基本作用和他们之间的关系, 所以今天就来详细分析下其具体的工作过程. 本文所用的依然是 ...

  4. ELK学习总结(3-2)elk的过滤查询

    和一般查询比较,filter查询:能够缓存数据在内存中,应该尽可能使用 建立测试数据 查看测试数据 1.filtered查询 GET /store/products/_search { "q ...

  5. 运维-替换kibana徽标

    作为一名纯运维人员,想更改kibana的徽标. 并不能像开发一样去看源码并修改源码. 所以我们可以替换徽标. 先来一个效果图.我的版本是5.5.1. 具体的修改过程: 在kibana安装路径下面. o ...

  6. Linux网络配置(仅主机模式)

    1.启动虚机,网络选择:仅主机模式 2.命令行输入 rm -rf /etc/udev/rules.d/70-persistent-net.rules 3.修改虚机中的网络配置 >>vim ...

  7. 【Vue中的swiper轮播组件】

    <template> <swiper :options="swiperOption" ref="mySwiper"> <!-- s ...

  8. uva 10870

    https://vjudge.net/problem/UVA-10870 题意: f(n) = a1f(n − 1) + a2f(n − 2) + a3f(n − 3) + . . . + adf(n ...

  9. [转][scrapy] CannotListenError: Couldn’t listen on [Errno 98] Address already in use.

    [scrapy] CannotListenError: Couldn't listen on [Errno 98] Address already in use. python  eason  1年前 ...

  10. ORACLE数据库之PL/SQL触发器、rownum、动态SQL、数据库之视图与索引

    WHEN子句说明触发约束条件.Condition为一个逻辑表达时,其中必须包含相关名称,而不能包含查询语句,也不能调用PL/SQL函数.WHEN子句指定的触发约束条件只能用在BEFORE和AFTER行 ...