div仿textarea使高度自适应
今天真的有些无语,在百度上找了很多关于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使高度自适应的更多相关文章
- div模拟textarea且高度自适应
需求 我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度, ...
- textarea下高度自适应
1,背景:textarea的高度不会随内容的增加而自适应,会出现滚动条 解决方案: 1)使用div模拟textarea 使用h5的属性 <div contenteditable=&quo ...
- div模拟textarea实现高度自增长
今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...
- DIV+CSS左右列高度自适应问题
其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom: ...
- textarea实现高度自适应
css部分 #textarea { display: block; margin:0 auto; overflow: hidden; width: 550px; font-size: 14px; he ...
- div仿textarea可输入
原本要用textarea,但是后来发现好像只有IE支持textarea里边使用html标签,由于需要在textarea中显示一条横线(<hr />),在网上查了很久,都说textarea是 ...
- div仿textarea
CSS代码: .test_box { width: 400px; min-height: 120px; max-height: 300px; _height: 120px; margin-left: ...
- DIV仿textarea文本域,contenteditable如何只能输入纯文本
对于支持HTML5浏览器有2种方法: 1. HTML5 <div contenteditable="plaintext-only"></div> 2. C ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
随机推荐
- Oracle中的commit详解
本文转自 : http://blog.csdn.net/hzhsan/article/details/9719307 它执行的时候,你不会有什么感觉.commit在数据库编程的时候很常用,当你执行DM ...
- linux系统维护时的一些小技巧,包括系统挂载新磁盘的方法!可收藏!
这里发布一些平时所用到的小技巧,不多,不过会持续更新.... 1.需要将history创建硬链接ln 全盘需要备份硬链接 ln /etc/xxx /home/xxx 2.root用户不可以远程 /et ...
- JavaScript中的this
本文尽量避免概念性的讲解,那样太抽象 所以下面以一些简单的例子,从易到难对this的用法总结 1.方法中的this会指向当前执行该方法的对象 如: var name = "window&qu ...
- ReSharper详解Index0
JetBrains ReSharper可以帮助Visual Studio用户编写出更好的代码.支持对C#,VB.NET,XAML,JavaScript,TypeScript,JSON,XML,HTML ...
- 【腾讯Bugly干货分享】动态链接库加载原理及HotFix方案介绍
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57bec216d81f2415515d3e9c 作者:陈昱全 引言 随着项目中动 ...
- WPF - 属性系统 (3 of 4)
依赖项属性元数据 在前面的章节中,我们已经介绍了WPF依赖项属性元数据中的两个组成:CoerceValueCallback回调以及PropertyChangedCallback.而在本节中,我们将对其 ...
- 如何利用 Visual Studio 自带工具提高开发效率
Visual Stuido 是一款强大的Windows 平台集成开发工具,你是否好好地利用了它呢? 显示行号 有些时候(比如错误定位)的时候,显示行号将有利于我们进行快速定位. 如何显示 1. 工具 ...
- linux笔记
1 动态查看日志 tail -f filename tail -1000f filename 2 解压当前目录内容为xxx.zip zip -r xxx.zip ./* 3 查看内存使用情况 fre ...
- ecshop 模板开发总结
ecshop 模板开发总结 模板标签 1.{$articleTitle|escape:"html"} 描述:用于html转码,url转码,在没有转码的变量上转换单引号,十六进制转码 ...
- Atitit 图像处理和计算机视觉的分类 三部分 图像处理 图像分析 计算机视觉
Atitit 图像处理和计算机视觉的分类 三部分 图像处理 图像分析 计算机视觉 1.1. 按照当前流行的分类方法,可以分为以下三部分:三部分 图像处理 图像分析 计算机视觉1 1.2. 图像处理需要 ...