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. [PReact] Integrate Redux with Preact

    Redux is one of the most popular state-management libraries and although not specific to React, it i ...

  2. swift开发网络篇—利用NSURLSession 发送GET和POST请求

    说明:本文示例代码发送的请求均为http请求,需要对info.plist文件进行配置.如何配置,请参考https://github.com/HanGangAndHanMeimei/iOS9Adapta ...

  3. php 面试题一(看视频的学习量比网上瞎转悠要清晰和明了很多)(看视频做好笔记)(注重复习)

    php 面试题一(看视频的学习量比网上瞎转悠要清晰和明了很多)(看视频做好笔记)(注重复习) 一.总结 1.无线分类的本质是树(数据结构)(数的话有多种储存结构可以实现,所以对应的算法也有很多),想到 ...

  4. word vba 1 页面视图

  5. 12.1、USB驱动——描述符、URB、管道

    大家常说,一个设备通常有多个配置,配置通常有多个接口,接口通常有多个端点.接口代表逻辑上的设备,比如声卡分为 录音和播放.访问设备时,访问的是某个接口(逻辑设备).除了端点0之外,每个端点只支持一个传 ...

  6. ios_webView

    iOS开发中WebView的使用 在AppDelegate.m文件里 view sourceprint" class="item about" style="c ...

  7. Nginx content cache Nginx内容缓存

    原文地址:http://nginx.com/resources/admin-guide/caching/ Nginx content cache Nginx内容缓存 This chapter desc ...

  8. jquery如何实现点击标题收缩下面的内容

    jquery如何实现点击标题收缩下面的内容 一.总结 一句话总结:怎么做复杂前端任务,先把样式(最简单)做出来,然后在写js. 1.如何取jquery集合中的某个索引号的元素? 不是get(),是eq ...

  9. 通过onTouch来确定点击的是listView哪一个item

    事实上这主要是用了ListView的一个方法,通过坐标就能够确定当前是哪一个listView,别的我就不多说了直接看看代码吧, lv_flide.setOnTouchListener(new OnTo ...

  10. [Javascript] Combine Objects with Object.assign and Lodash merge

    Learn how to use Object.assign to combine multiple objects together. This pattern is helpful when wr ...