用一个div模拟textarea的实现
<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的实现的更多相关文章
- 用一个div模拟textarea并实现高度自适应
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- div模拟textarea以实现高度自适应实例页面
作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...
- H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长)
无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- div模拟textarea文本域轻松实现高度自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- div模拟textarea实现高度自增长
今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...
- div模拟textarea
有些Weber可能没有用过contenteditable这个属性,如果想编辑一个DIV里面的内容,这个属性是一个非常不错的选择 <div contenteditable="true ...
随机推荐
- ELK学习总结(2-5)elk的版本控制
----------------------------------------------------------------- 1.悲观锁和乐观锁 悲观锁:假定会发生并发冲突,屏蔽一切可能违反数据 ...
- maven的使用之一简单的安装
首先,我们知道,在传统的项目中,我们会导入一堆的jar包,那样的话,我们会发现我们的jar包的大小已经占了整个项目大小的90%以上,甚至更多,而且,我们的jar包只能自己使用,如果 其他人想用的话,还 ...
- VMware虚拟机安装
学习Linux系统最好的方式就是在自己的虚拟机上安装Linux:接下来就给大家简单介绍一下VMware虚拟机的安装以及Linux的安装:VMware虚拟机只是为了更好的学习Linux: ...
- linux下Tab及shell 补全python
Python自动补全 Python自动补全有vim编辑下和python交互模式下,下面分别介绍如何在这2种情况下实现Tab键自动补全. vim python自动补全插件:pydiction 可以实现下 ...
- TreeMap就这么简单【源码剖析】
前言 声明,本文用得是jdk1.8 前面章节回顾: Collection总览 List集合就这么简单[源码剖析] Map集合.散列表.红黑树介绍 HashMap就是这么简单[源码剖析] LinkedH ...
- Spring源码情操陶冶-任务定时器ConcurrentTaskScheduler
承接前文Spring源码情操陶冶#task:scheduled-tasks解析器,本文在前文的基础上讲解单核心线程线程池的工作原理 应用附例 承接前文的例子,如下 <!--define bean ...
- 【转】如何使用slave_exec_mode优雅的跳过1032 1062的复制错误
今天线上的主从复制发生1062的错误,使用sql_slave_skip_counter跳过之后,由于后面的事务需要对刚刚的数据进行update,后续造成了新的1032的错误. 后来,无意中发现还有更好 ...
- 学习HTML的第二次课
1.图片 <img / > 图片的格式: 1.1BMP 占用空间大,颜色丰富. 1.2JPEG 有损压缩,占用空间较小. 1.3GIF 多帧动图,支持透明色. 1.4PNG 无损压缩,位图 ...
- 自己使用Vue全家桶问题合集(很多eslint规范问题)
遇到很多问题一一道来. 1.vue报错 Do not use built-in or reserved HTML elements as component id:header 组件,不能和html标 ...
- css befroe after 尾类技术器
CSS counter计数器(content目录序号自动递增)详解 这篇文章发布于 2014年08月26日,星期二,15:54,归类于 css相关. 阅读 44148 次, 今日 11 次 by zh ...