textarea 自动高度
textarea 自动撑开高度
var textAreaArr = document.querySelectorAll('.textarea');
for (var i = 0; i < textAreaArr.length; i++) {
autoTextarea(textAreaArr[i]);
}
function autoTextarea(elem, extra, maxHeight) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function (type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle = elem.currentStyle ? function (name) {
var val = elem.currentStyle[name];
if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
}
return val;
} : function (name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getStyle('height'));
elem.style.resize = 'none';
var change = function () {
var scrollTop, height,
padding = 0,
style = elem.style;
if (elem._length === elem.value.length) return;
elem._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
}
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height = minHeight + 'px';
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
}
style.height = height + extra + 'px';
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
}
};
addEvent('propertychange', change);
addEvent('input', change);
addEvent('focus', change);
change();
}textarea 自动高度的更多相关文章
- textarea 实现高度自动增长
有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因 ...
- KindEditor 销毁与自动高度冲突解决
前提准备情况: KindEditor(KE) + easyUI 1.通过 EasyUI.Window 打开一个窗口,窗口中包含一个 KE编辑器:在次打开WIndow 的时候 KE会出现编辑器里面的 ...
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
- iframe自动高度
<script> //设置iframe自动高度 function setIframe(id){ var fn = function(){ try{ var iframe = typeof ...
- textarea自适应高度
最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...
- div模拟textarea实现高度自增长
今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...
- (转载)html中div使用自动高度
为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高: 2.可以方便的容纳其他html标签: static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你 ...
- textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标
1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...
- textarea下高度自适应
1,背景:textarea的高度不会随内容的增加而自适应,会出现滚动条 解决方案: 1)使用div模拟textarea 使用h5的属性 <div contenteditable=&quo ...
随机推荐
- jQuery可拖拽旋转的3D图片墙
在线演示 本地下载
- Python简单主机批量管理工具
一.程序介绍 需求: 简单主机批量管理工具 需求: 1.主机分组 2.主机信息使用配置文件 3.可批量执行命令.发送文件,结果实时返回 4.主机用户名密码.端口可以不同 5.执行远程命令使用param ...
- Two strings CodeForces - 762C (字符串,双指针)
大意: 给定字符串$a$,$b$, $b$可以任选一段连续的区间删除, 要求最后$b$是$a$的子序列, 求最少删除区间长度. 删除一段连续区间, 那么剩余的一定是一段前缀和后缀. 判断是否是子序列可 ...
- ABAP常用函数归纳
转至:http://blog.csdn.net/forever_crazy/article/details/17707745 获取当前逻辑系统标识:OWN_LOGICAL_SYSTEM_GET 一.日 ...
- cefsharp webBrowser Javascript 打开winForm界面
在Cef webBrowser中,如果要调用 Javascript打开 一个 winForm界面,则需要使用 ShowDialog(),而不能使用 Show(),否则界面上的鼠标会转个不停
- 关于hdfs的一些认知
先从网上copy一些优势点 1.高容错性数据自动保存多个副本.它通过增加副本的形式,提高容错性.某一个副本丢失以后,它可以自动恢复,这是由 HDFS 内部机制实现的,我们不必关心. 2.适合批处理它是 ...
- 服务命令(systemctl的使用)
常用的service与systemctl命令的对比 应用举例: ●start:开启服务 ●stop:停止服务 ●status:参数来查看服务运行情况 ●restart:重新加载服务 应用举例·: #启 ...
- 安全专家发现GE Multilin SR的一个关键漏洞对全球电网构成严重威胁。
A team of researchers from New York University has found a serious vulnerability in some of GE Multi ...
- 微服务架构:构建PHP微服务生态
微服务架构:构建PHP微服务生态 Linux系统技术交流QQ群(1675603)验证问题答案:刘遄 导读 诞生于 2014 年的“微服务架构”,其思想经由 Martin Fowler 阐述后,在近 ...
- 未能加载文件或程序集“System.Web.Http.WebHost
http://blog.csdn.net/yuanzhugen/article/details/46625353(转)