textarea实现高度自适应
css部分
#textarea {
display: block;
margin:0 auto;
overflow: hidden;
width: 550px;
font-size: 14px;
height: 18px;
line-height: 24px;
padding:2px;
}
textarea {
outline: 0 none;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
js代码
/**
* 文本框根据输入内容自适应高度
* @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();
};
html部分 包含调用
<textarea id="textarea" placeholder="回复内容"></textarea>
<script>
var text = document.getElementById("textarea");
autoTextarea(text);// 调用
</script>
textarea实现高度自适应的更多相关文章
- div仿textarea使高度自适应
今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...
- textarea下高度自适应
1,背景:textarea的高度不会随内容的增加而自适应,会出现滚动条 解决方案: 1)使用div模拟textarea 使用h5的属性 <div contenteditable=&quo ...
- div模拟textarea且高度自适应
需求 我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度, ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- 构造高度自适应的textarea
高度自适应的textarea,这个需求还是比较常见的,随着用户的输入textarea的高度自动变化,这样输入较少的时候可以节省空间,输入多的时候可以不出现滚动条,让内容尽可能的展现在用户的视线内. 可 ...
- textarea高度自适应问题
textarea中的文字如果过多,就会产生滚动条,一本分文本被遮盖住,不能看到所有的文本. 那么,如何才能让textarea的高度随输入内容多少,可以自动的改变高度呢? 解决思想: 1 利用conte ...
- div模拟textarea以实现高度自适应实例页面
作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...
- 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)
一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...
- div模拟textarea文本域轻松实现高度自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 记录卸载5.7版本MySQL并安装5.6版本MySQL
新版本有些问题很烦,也没时间去找解决办法,只好用回5.6,首先卸载6.7的MySQL: sudo apt-get autoremove --purge mysql-server-* apt remov ...
- 【Leetcode周赛】比赛目录索引
contest 1 ~ contest 10: contest 11 ~ contest 20: contest 21 ~ contest 30 : https://www.cnblogs.com/z ...
- 企业级监控软件zabbix搭建部署之zabbix server的安装
企业级监控软件zabbix搭建部署之zabbix server的安装 zabbix线上已经应用半年多了,关于zabbix在生产环境中的使用心得,以及一些经验写下来,希望让大家少走弯路,共同学习! 环境 ...
- App中h5音频不能播放问题
前置:以下问题是针对vue项目的解决方案 问题一:IOS中音频不能自动播放 原因:ios禁止了音频自动播放 解决办法:在vue的生命周期mounted中获取音频Dom并调用音频播放方法play(),注 ...
- 【HDOJ6684】Rikka with Game(博弈)
题意:有一个由小写字母组成的字符串,A和B两个人轮流操作,A想让序列的字典序最大,B想最小 两人都能任意选择一位上的字母将其右移一位(a->b,b->c……z->a)或者直接结束游戏 ...
- scau 1142 巡逻的士兵(分治)
1142 巡逻的士兵 时间限制:1000MS 内存限制:65536K 提交次数:217 通过次数:58 题型: 编程题 语言: G++;GCC Description 有N个士兵站成一队列, 现 ...
- Jira中的Tempo查看component以及issue的工作量汇总
在右侧group by的地方,同时选中component和issue
- 【CDN+】Kafka 的初步认识与入门
前言 项目中用到了Kafka 这种分布式消息队列来处理日志,本文将对Kafka的基本概念和原理做一些简要阐释 Kafka 的基本概念 官网解释: Kafka是最初由Linkedin公司开发,是一个分布 ...
- Vagrant 手册之同步目录 - VirtualBox
原文地址 如果你使用的 provider 是 VirtualBox,那么 VirtualBox 同步目录就是默认的同步目录类型.这些同步目录使用 VirtualBox 的共享目录系统来同步客户机跟宿主 ...
- Adam Optimization Algorithm
曾经多次看到别人说起,在选择Optimizer的时候默认就选Adam.这样的建议其实比较尴尬,如果有一点科学精神的人,其实就会想问为什么,并搞懂这一切,这也是我开这个Optimizer系列的原因之一. ...