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 自动高度的更多相关文章

  1. textarea 实现高度自动增长

    有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因 ...

  2. KindEditor 销毁与自动高度冲突解决

    前提准备情况: KindEditor(KE)  +  easyUI 1.通过 EasyUI.Window 打开一个窗口,窗口中包含一个 KE编辑器:在次打开WIndow 的时候 KE会出现编辑器里面的 ...

  3. div模拟textarea自适应高度

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

  4. iframe自动高度

    <script> //设置iframe自动高度 function setIframe(id){ var fn = function(){ try{ var iframe = typeof ...

  5. textarea自适应高度

    最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...

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

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

  7. (转载)html中div使用自动高度

    为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高: 2.可以方便的容纳其他html标签:     static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你 ...

  8. textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标

    1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...

  9. textarea下高度自适应

    1,背景:textarea的高度不会随内容的增加而自适应,会出现滚动条 解决方案: 1)使用div模拟textarea  使用h5的属性    <div contenteditable=&quo ...

随机推荐

  1. java检测是不是移动端访问

    request可以用别的代替 private static boolean isMobile(){ HttpServletRequest request = ThreadContextHolder.g ...

  2. ZuulServlet源码分析及ZuulFilter加载

    参考https://yq.aliyun.com/wenji/2...https://blog.csdn.net/lds2227... 1.声明ZuulServlet @Configuration @E ...

  3. sql server 函数详解(4)日期和时间函数

    时间和日期函数第一部分 时间和日期函数第二部分

  4. EJS学习(四)之语法规则下

    模版函数 在 EJS 之外,提供了一些额外的模版函数来简化我们的一些工作 GIT:https://github.com/willerce/tmt-ejs-helper css()方法 快速的引用 CS ...

  5. golang利用beego框架orm操作mysql

    GO引入orm框架操作mysql 在beego框架中引入orm操作mysql需要进行的步骤: 第一步:导入orm框架依赖,导入mysql数据库的驱动依赖 import ( "github.c ...

  6. 第十五篇 JS 移入移出事件 模拟一个二级菜单

    JS 移入移出事件 模拟一个二级菜单   老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,on ...

  7. 超详细思路讲解SQL语句的查询实现,及数据的创建。

    最近一直在看数据库方面的问题,总结了一下SQL语句,这是部分详细的SQL问题,思路讲解: 第一步:创建数据库表,及插入数据信息 --Student(S#,Sname,Sage,Ssex) 学生表 CR ...

  8. Centos的yum源更换为阿里云源

    1.备份 # mv /etc/yum.repos.d/CentOS-Base.repo # /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的CentOS- ...

  9. nginx搭建及加固

    系统使用的是centos7 Nginx安装及配置 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务 安装 我是用的环境是ce ...

  10. LIS 普及题

    题意 给你一个长度为 \(n\) 的序列 \(a\). 问是否存在一个长度为 \(L\) 的上升子序列,即存在 \(\{x_1,x_2,...,x_L\}(x_1\lt x_2\lt ...\lt x ...