var autoTextarea = function (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();
};
var text = document.querySelectorAll("textarea");
for(var a=0;a<text.length;a++){
autoTextarea(text[a])
}

textarea随内容自动增加高度的更多相关文章

  1. textarea跟随内容自动伸缩高度实现方案

    监听input事件,然后将textarea的style.height设置为最低高度(19px),进而获取到元素的scrollHeight,然后将scroolHeight设置为style.height

  2. Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  3. 小程序实现textarea行数自动增加

    查找网上案例很多,但是都不是很满意,参考大牛案例终结了一下,话不多说代码如下: 实现效果: 前段代码 <view class="text-box"> <view& ...

  4. 设置HTML的TextArea标记跟随文本内容自动设置高度

    写内容的时候用的是textarea来写,可以换行,然后预览页面也要显示是换行才行,所以预览页面还是要用textarea来显示, 样式去掉边框,不可以拉伸,不可编辑 // html <textar ...

  5. HTML的TextArea标记跟随文本内容自动设置高度

    js <textarea name="textarea" id="textarea" style='overflow-y: hidden;height:2 ...

  6. 设置UILabel可变高度(根据文本内容自动适应高度)

    @property(nonatomic)UILabel *showLabel;   // 计算文本所占高度,计算出来之后设置label的高度 // 第一个参数:字体大小,字体大小/样式影响计算字体的高 ...

  7. 在textarea的内容后面增加内容

    document.getElementById("result").value+=data+"\n>"; 本文为本人用来记录自己做的一些东西,如有不对的地 ...

  8. JS案例 - 可自动伸缩高度的textarea文本框

    文本框的默认现象: textarea如果设置cols和rows来规定textarea的尺寸,那么textarea的默认宽高是这俩属性设置的值,可以通过鼠标拖拽缩放文本框的尺寸. textarea如果设 ...

  9. flex布局无法自动适应的bug以及实现textarea根据内容自适应

    -webkit-box布局无法自动适应高度的bug css3的新属性display:-webkit-box带来了前端开发自动适应布局的春天 ,但是我发现这个布局有个问题, 而且这个问题我无法解决: 描 ...

随机推荐

  1. (6)uboot具体解释——关闭缓存和mmu

    uboot具体解释--关闭缓存和mmu 当设置完时钟分频以后,uboot就会运行cpu_init_crit汇编函数,这个函数的主要作用就是关闭缓存和mmu.然后调用lowlevel_init函数进行系 ...

  2. java中String\十六进制String\byte[]之间相互转换函数

    java二进制,字节数组,字符,十六进制,BCD编码转换2007-06-07 00:17/** *//** * 把16进制字符串转换成字节数组 * @param hex * @return */ pu ...

  3. thinkphp事务不能回滚的问题(因为助手函数)

    thinkphp事务不能回滚的问题(因为助手函数) 一.总结 二.thinkphp 5 事务不能回滚 Db::startTrans(); try{ db('address')->where([' ...

  4. python的sorted() 函数

    摘自:http://www.runoob.com/python/python-func-sorted.html sortedClassCount=sorted(classCount.items(),k ...

  5. mongodb查询部分满足条件的列

    db.tblorders.createIndex( { orderid : -1 },{background:true, name:"index_orderid"} ); db.o ...

  6. vue-cli 3.x 移除console总结

    网上找了很多vue-cli 3.x的配置,很多已经不适用了,把采坑的经历记录下来,供参考. 一.使用 uglifyjs-webpack-plugin 插件 配置如下: // vue.config.js ...

  7. 9、LCD驱动程序框架

    linux-3.4.2\drivers\video\S3C2410fb.c(内核自带驱动程序) fbmem.c是LCD驱动程序顶层框架文件,是一个通用的文件,在初始化init函数中会注册一个字符设备, ...

  8. Python中字符串的解压缩

    今天在用Streaming-Python处理一个MapReduce程序时,发现reducer失败,原由于耗费内存达到极限了.细致查看代码时,发现有一个集合里保存着URL,而URL长度是比較长的,直接保 ...

  9. 【跟我一起学Unity3D】代码中分割图片而且载入帧序列动画

    在Cocos2dx中.对大图的处理已经封装好了一套自己的API,可是在Unity3D中貌似没有类似的API(好吧,实际上是有的,并且功能更强大),或者说我没找到. 只是这也在情理之中,毕竟Unity3 ...

  10. markdown + vim

    https://www.jianshu.com/p/24aefcd4ca93https://github.com/isnowfy/python-vim-instant-markdownhttps:// ...