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. 福建工程学院第十四届ACM校赛B题题解

    第二集,未来的我发量这么捉急的吗 题意: 有n个数,请问有多少对数字(i,j)(1<=i<j<=n),满足(a[i]^a[j])+((a[i]&a[j])<<1) ...

  2. Java 类的构造器中this()和super()的困惑

    关于构造器中super的使用,书本上这样写: “super是指向父类的引用,如果构造方法没有显示地调用父类的构造方法,那么编译器会自动为它加上一个默认的super()方法调用.如果父类由没有默认的无参 ...

  3. C# 面向对象3 静态和非静态的区别

    静态和非静态的区别 1.在非静态类中,既可以有实例成员(非静态成员),也可以有静态成员. 2.在调用实例成员的时候,需要使用对象名.实例成员; 在调用静态成员的时候,需要使用类名.静态成员名; 总结: ...

  4. golang(6): 接口 & 反射

    接口详解 // 举例:sort包中的 Sort 函数,如下: func Sort(data Interface) Sort sorts data. It makes one call to data. ...

  5. 数据绑定-绑定Servlet内置对象

    数据绑定:获取用户提交的参数,绑定到入参的参数中,就叫数据绑定. 绑定Servlet内置对象: 测试:

  6. php重定向的三种方法分享

    一.用HTTP头信息  也就是用PHP的HEADER函数.PHP里的HEADER函数的作用就是向浏览器发出由HTTP协议规定的本来应该通过WEB服务器的控制指令,例如: 声明返回信息的类型(" ...

  7. Maven将java打包成jar并且运行笔记

    Maven项目打包成jar并且运行笔记 首先创建一个maven项目 运行成功后,有两种方式将项目进行打包. 第一种方式: 在IDEA编辑器中maven项目进行打包: 这里显示jar包中没有主清单属性, ...

  8. 梳理common-io工具包

    title: 梳理common-io工具包 comments: false date: 2019-08-28 14:21:58 description: 对common-io工具包中的常用类进行整理, ...

  9. win7(64位旗舰版)visual studio 2017无法安装及vs2015闪退问题解决方式

    折腾了两天,几乎试了网上说的所有方法(就差重装系统了,看到有人说重装系统之后还是同样的问题,果断放弃重装),visual studio 2017的安装问题终于解决了,为了帮助同样还在折腾的初级开发者们 ...

  10. mac系统下Eclipse + pydev配置python Interpreter

    mac系统下Eclipse + pydev配置python Interpreter   之前都在windows下使用Eclipse + pydev 进行开发,未发现什么异常,最近对wxpy.itcha ...