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带来了前端开发自动适应布局的春天 ,但是我发现这个布局有个问题, 而且这个问题我无法解决: 描 ...
随机推荐
- [D3] Create Chart Axes with D3 v4
Most charts aren’t complete without axes to provide context and labeling for the graphical elements ...
- 6.4 Android硬件访问服务编写HAL代码
JNI向上提供本地函数,向下加载HAL文件,并调用HAL的函数: HAL负责访问驱动程序执行硬件操作 JNI和HAL都是用c语言或者C++语言编写的,JNI加载HAL的实质就是使用dlopen加载动态 ...
- Size Balanced Tree(SBT树)整理
不想用treap和Splay,那就用SB树把,哈哈,其实它一点也SB,厉害着呢. 先膜拜一下作者陈启峰.Orz 以下内容由我搜集整理得来. 一.BST及其局限性 二叉查找树(Binary Search ...
- iOS调试 - 基本技巧
在程序中,无论是你想弄清楚为什么数组中有3个对象而不是5个,或者为什么一个新的玩家开始之后,游戏在倒退——调试在这些处理过程中是比较重要的一部 分.通过本文的学习,我们将知道在程序中,可以使用的大多数 ...
- 通过onTouch来确定点击的是listView哪一个item
事实上这主要是用了ListView的一个方法,通过坐标就能够确定当前是哪一个listView,别的我就不多说了直接看看代码吧, lv_flide.setOnTouchListener(new OnTo ...
- 自定义控件三部曲之动画篇(一)——alpha、scale、translate、rotate、set的xml属性及用法
前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的心态,想用你的app,却是因为你的技术问题,让他们不得不放弃,而你一个回访电话却让他们尽释前嫌,当最后把手机号留给他们以便随 ...
- ArcGIS Engine 编辑- IWorkspaceEdit
转自原文 ArcGIS Engine 编辑- IWorkspaceEdit 这个例子中,我创建了1000条要素,并结合缓冲将数据写到文件中,并且添加了时间统计,当然数据是我捏造的,还请原谅,这个花费的 ...
- [Compose] 11. Use Task for Asynchronous Actions
We refactor a standard node callback style workflow into a composed task-based workflow. For example ...
- Android JNI 自定义对象为参数和返回值
ndroid JNI 提供了很强大的支持,不仅可以采用基本类型做为参数和返回值,同时也支持自定义对象做为参数和返回值,以下举例说明. 一.定义作为输入和返回的自定义类 (仅提供两个简单类型和一个打印函 ...
- PHP CodeBase: 判断用户是否手机访问
随着移动设备的普及,网站也会迎来越来越多移动设备的访问.用适应PC的页面,很多时候对手机用户不友好,那么有些时候,我们需要判断用户是否用手机访问,如果是手机的话,就跳转到指定的手机友好页面.这里就介绍 ...