textarea高度自适应
方法一、直接在textarea中添加oninput方法：
<textarea οninput="this.style.height = this.scrollHeight + 'px';"></textarea>
说明：
在IE下可以根据输入的内容自适应高度，但是在谷歌浏览器下随着输入的字数越多，高度越高， 比实际的高度要高出很多；
方法二、自定义高度设置方法：
<script>
/**
* 文本框根据输入内容自适应高度
* param {HTMLElement} 输入框元素
* param {Number} 设置光标与输入框保持的距离(默认0)
* param {Number} 设置最大高度(可选)
*/
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();
};
</script>
说明：
在IE和谷歌下均能自适应高度；但是动态给文本框赋值的时候，高度不能自适应，需要鼠标点击到文本框才能实现高度自适应的效果；
方法三：为了达到完美效果，要综合使用方法一和方法二；
使用实例：
1、样式：
.areaKFYYSM {
margin-top: 5px;
min-height: 35px !important;
height: auto;
width: 96% !important;
}
2、文本框：
<textarea class="areaKFYYSM" id="areaKFYYSM" οninput="this.style.height = this.scrollHeight + 'px';" ></textarea>
<input id="btn_Ok" type=button value='初始化值' class="img-smallbtn btn-ok" οnclick="kfyysmChangeBFZ()" />
3、初始化方法设置文本框高度方法：
$(function () {
// 为每一个textarea绑定事件使其高度自适应
$.each($("textarea"), function (i, n) {
autoTextarea($(n)[0]);
});
});
4、文本框动态赋值后，调用input事件：
function kfyysmChangeBFZ() {
// 给文本框初始值
$("#areaKFYYSM").val("文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值");
//文本框高度自适应
$("#areaKFYYSM").trigger("input");
}
参照网址：
https://blog.csdn.net/fxss5201/article/details/63267432
textarea高度自适应相关推荐
- textarea高度自适应自动增高撑开
方法一:div模拟textarea文本域轻松实现高度自适应 demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo1.html 因为t ...
- html文本域 高度自适应,textarea高度自适应，textarea随着内容高度变化
有时候我们需要textarea的高度随着内容的多少去自适应的变化,今天我使用了JS原生和JQ写了一个textarea的高度随着他的内容高度变化的代码,希望能帮上忙. 废话不多说直接贴代码: texta ...
- html textarea 自动高度,HTML页面中textarea高度自适应解决方案
背景: 页面上加了一个div标签,div标签下有一个textarea标签,textarea的内容通过后台读取数据自动填充,希望通过textarea的高度随着内容的增减,自动调整,在网上说通过设置tex ...
- css实现 textarea 高度自适应
此textarea非彼textarea ,有经验的老司机们应该知道html标签contenteditable这个属性. 利用此属性使当前的标签成为可以输入的状态,等同于输入框. 演示地址:https: ...
- jQuery实现textarea高度自适应
js代码 $.fn.autoHeight = function () {function autoHeight(elem) {elem.style.height = 'auto';elem.scrol ...
- textarea如何实现高度自适应？
文章来源:http://blog.csdn.net/tianyitianyi1/article/details/49923069 转自:http://www.xuanfengge.com/textar ...
- python文本框随窗体变化_Javascript 文本框textarea高度随内容自适应增长收缩
直接上代码: 方案一: 枫芸志 » 文本框textarea高度自适应增长/伸缩 晴枫制作 http://jb51.net [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行] 方案一在各浏 ...
- php textarea 默认值,html中的textarea属性大全(设置默认值 高度自适应 获取内容 限制输入字数 placeholder)...
1.textarea设置默认值 HTML: 此段代码设置一个textarea文本框 并且设置为隐藏 2.textarea高度自适应 今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框 ...
- java textarea 大小_textarea高度自适应的两种方案
阅读全文你将获得以下解决方案. 点击长文本编辑textarea,自动获得焦点 随着输入值自动伸缩高度 可复制添加信息 可粘贴文本 可粘贴图片 以下实例代码执行环境为Chrome80 方案一 HTML5 ...
最新文章
- C和C++安全编码笔记：整数安全
- 用UltraISO制作U盘启动盘，支持windows 7
- java SSM框架
- Outlook通过RPC/RPC Over HTTPS访问Exchange邮箱
- 微信小程序 禁止弹框下面的内容滑动 弹窗禁止底部内容滚动
- 学计算机专业的自荐信,浙江大学(计算机类)自主招生自荐信范文
- exec与xargs区别
- 一个很好的反选的例子
- destoon 支付异步接口文件 notify.php 调试方式
- python内置函数type_Python基于内置函数type创建新类型
- Python科学计算——Numpy知识点
- MCSkin3D我的世界皮肤制作器 中文补丁
- AForge.net获取摄像头
- Docker 容器中添加字体
- 布尔运算(Boolean Operators)
- 找到了airdrop无法发现对方的原因了，原因你想不到！
- VBA批量导入图片到多Word文档并加标题（会飞的鱼）
- 【雷达波位编排】基于matlab相控阵雷达的波位编排仿真【含Matlab源码 2251期】
- C++控制台程序(文字小游戏)
- Hard Disk Sentinel Pro v5.70.8 硬盘哨兵 电脑硬盘检测工具