textarea 自动高度
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 自动高度的更多相关文章
- textarea 实现高度自动增长
有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因 ...
- KindEditor 销毁与自动高度冲突解决
前提准备情况: KindEditor(KE) + easyUI 1.通过 EasyUI.Window 打开一个窗口,窗口中包含一个 KE编辑器:在次打开WIndow 的时候 KE会出现编辑器里面的 ...
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
- iframe自动高度
<script> //设置iframe自动高度 function setIframe(id){ var fn = function(){ try{ var iframe = typeof ...
- textarea自适应高度
最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...
- div模拟textarea实现高度自增长
今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...
- (转载)html中div使用自动高度
为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高: 2.可以方便的容纳其他html标签: static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你 ...
- textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标
1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...
- textarea下高度自适应
1,背景:textarea的高度不会随内容的增加而自适应,会出现滚动条 解决方案: 1)使用div模拟textarea 使用h5的属性 <div contenteditable=&quo ...
随机推荐
- python基础之函数进阶
假如有一个函数,实现返回两个数中的较大值: def my_max(x,y): m = x if x>y else y return mbigger = my_max(10,20)print(bi ...
- C# 如何正确删除控件已添加的事件
方法一:在相对应里窗体下面有个 "窗体.Designer.cs"文件,双击打开,找到相关事件,删除就行. 方法二:找到构造函数,“InitializeComponent()”对着它 ...
- 使用sublimeserver启动本地服务器进行调试
最近在做前后端分离的项目,访问后台接口的时候会产生跨域问题,修改了相关配置解决了跨域问题,但是配置中只对开发环境进行了设置,没有设置生产环境,为了验证生产环境确实无法访问后台接口遂npm run bu ...
- SVM处理多分类问题
"one-against-one" approach from sklearn import svm X = [[0], [1], [2], [3]] Y = [0, 1, 2, ...
- laravel 使用 intervention/image 的注意方法
出错NotSupportedException in AbstractEncoder.php line 151: Encodingformat (tmp) is not supported. 这个只是 ...
- c++ 实时通信系统(基础知识TCP/IP篇)
编写前的基础知识 C/S结构: C/S是Client/Server,即客户端/服务器端架构,一种典型的两层架构.客户端包含一个或多个在用户的电脑上运行的程序服务器端有两种,一种是数据库服务器端,客户端 ...
- [转帖]微軟将从 .NET 4 以后的版本弃用 System.Data.OracleClient
转帖--微軟将从 .NET 4 以后的版本弃用 System.Data.OracleClient Posted on -- : eaglet 阅读() 评论() 编辑 收藏 原贴 http://www ...
- Gym - 101630G The Great Wall (前缀和+树状数组+二分)
题意:有一个序列,一开始所有的元素都是ai,你可以选择两个长度相等的区间,如果某个元素被一个区间覆盖,那么变为bi,如果被两个区间都覆盖,那么变为ci.问所有区间的选择方法中产生的第k小的元素总和. ...
- Phaserjs3 对象池随机产生炸弹并销毁 -- Html网页游戏开发
scene.js /// <reference path="../../libs/phaser/phaser.min.js"/> 'use strict'; var B ...
- Visual Studio开发首选!DevExtreme v19.1.6全新来袭
DevExtreme Complete Subscription是性能最优的 HTML5,CSS 和 JavaScript 移动.Web开发框架,可以直接在Visual Studio集成开发环境,构建 ...