textarea随内容自动增加高度
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随内容自动增加高度的更多相关文章
- textarea跟随内容自动伸缩高度实现方案
监听input事件,然后将textarea的style.height设置为最低高度(19px),进而获取到元素的scrollHeight,然后将scroolHeight设置为style.height
- Jquery实现 TextArea 文本框根据输入内容自动适应高度
原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...
- 小程序实现textarea行数自动增加
查找网上案例很多,但是都不是很满意,参考大牛案例终结了一下,话不多说代码如下: 实现效果: 前段代码 <view class="text-box"> <view& ...
- 设置HTML的TextArea标记跟随文本内容自动设置高度
写内容的时候用的是textarea来写,可以换行,然后预览页面也要显示是换行才行,所以预览页面还是要用textarea来显示, 样式去掉边框,不可以拉伸,不可编辑 // html <textar ...
- HTML的TextArea标记跟随文本内容自动设置高度
js <textarea name="textarea" id="textarea" style='overflow-y: hidden;height:2 ...
- 设置UILabel可变高度(根据文本内容自动适应高度)
@property(nonatomic)UILabel *showLabel; // 计算文本所占高度,计算出来之后设置label的高度 // 第一个参数:字体大小,字体大小/样式影响计算字体的高 ...
- 在textarea的内容后面增加内容
document.getElementById("result").value+=data+"\n>"; 本文为本人用来记录自己做的一些东西,如有不对的地 ...
- JS案例 - 可自动伸缩高度的textarea文本框
文本框的默认现象: textarea如果设置cols和rows来规定textarea的尺寸,那么textarea的默认宽高是这俩属性设置的值,可以通过鼠标拖拽缩放文本框的尺寸. textarea如果设 ...
- flex布局无法自动适应的bug以及实现textarea根据内容自适应
-webkit-box布局无法自动适应高度的bug css3的新属性display:-webkit-box带来了前端开发自动适应布局的春天 ,但是我发现这个布局有个问题, 而且这个问题我无法解决: 描 ...
随机推荐
- CSS3实现的立体button
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android多线程研究(9)——读写锁
一.什么是锁 在Java的util.concurrent.locks包下有关于锁的接口和类如下: 先看一段代码: package com.codeing.snail.test; public clas ...
- [AngularJS Ng-redux] Integrate ngRedux
Up to this point, we have created an effective, yet rudimentary, implementation of Redux by manually ...
- JavaScript对象的继承
原文 简书原文:https://www.jianshu.com/p/78ce11762f39 大纲 前言 1.原型链继承 2.借用构造函数实现继承 3.组合模式继承 4.原型式继承 5.寄生式继承 6 ...
- 黑马程序猿-assign、retain、release、nonatomic、atomic、strong、weak
都是用于修饰@property声明的变量 assign:用于非oc对象类型,表示直接赋值(默认值) retain:用于mrc中,用于类属性中有oc对象的情况,表示先推断赋值的对象是否和实例对象变量的值 ...
- 2、Cocos2dx 3.0游戏开发找小三之引擎简单介绍
尊重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27094663 引擎简单介绍 Cocos2d-x 的 ...
- HDU4268 Alice and Bob 【贪心】
Alice and Bob Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- 撸代码--类QQ聊天实现(基于linux 管道 信号 共享内存)
一:任务描写叙述 A,B两个进程通过管道通信,像曾经的互相聊天一样,然后A进程每次接收到的数据通过A1进程显示(一个新进程,用于显示A接收到的信息),A和A1间的数据传递採用共享内存,相应的有一个B1 ...
- Thinking in UML 学习笔记(四)——UML核心视图之活动图
在UML中活动图的本质就是流程图,它描述了为了完成某一个目标需要做的活动以及这些互动的执行顺序.UML中有两个层面的活动图,一种用于描述用例场景,另一种用于描述对象交互. 活动图只是我们用来描述业务目 ...
- Ubuntu snmp配置
http://wenku.baidu.com/link?url=7ieAta_w87NDrTOT_DyEQSj4Rd9i82YRUGQl--g077oC3ftckgH7wpT5QEyir-NtZLA3 ...