textarea实现高度自适应

最新推荐文章于 2022-10-15 14:11:31 发布

我是来写bug的吧

最新推荐文章于 2022-10-15 14:11:31 发布

阅读量278

点赞数

分类专栏： JS 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_55547532/article/details/122080755

版权

JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<body>
	<textarea></textarea>
<script>
	var textarea =document.querySelector("textarea");
	autoTextarea(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();
			};

</script>
</body>

还有一种使用div模拟textarea实现高度自适应

<div contenteditable="true">
	<br />
</div>

div{
	width: 400px;
	min-height: 20px;
	max-height: 300px;
	padding: 13px;
	outline: 0;
	word-wrap: break-word;
	overflow-x: hidden;
	overflow-y: auto;
				
}

我是来写bug的吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
textarea实现高度自适应

<body> <textarea></textarea><script> var textarea =document.querySelector("textarea"); autoTextarea(textarea); var autoTextarea = function(elem, extra, maxHeight) { extra = extra || 0; var isFirefox = !!document.getBox.
复制链接

扫一扫