textarea高度自增

最新推荐文章于 2025-06-30 10:12:51 发布

攻城狮Lee丶

最新推荐文章于 2025-06-30 10:12:51 发布

阅读量2.7w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： CSS黑魔法

本文链接：https://blog.youkuaiyun.com/zhuoganliwanjin/article/details/79707511

CSS黑魔法专栏收录该内容

19 篇文章 ¥19.90 ¥99.00

订阅专栏

这篇博客介绍了一种方法，通过监听textarea的change、cut、paste、drop和keydown事件，结合window.setTimeout和scrollHeight属性，实现textarea的高度自适应增长，类似于微信输入框的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

		var observe;
    		if (window.attachEvent) {
		    observe = function (element, event, handler) {
		        element.attachEvent('on'+event, handler);
		    };
		}
		else {
		    observe = function (element, event, handler) {
		        element.addEventListener(event, handler, false);
		    };
		}
		function init () {
		    var text = document.getElementById('text');//textarea元素
		    function resize () {
		        text.style.height = 'auto';
		        text.style.height = text.scrollHeight+'px';
		    }
		   
		    function delayedResize () {
		        window.setTimeout(resize, 0);
		    }
		    observe(text, 'change',  resize);
		    observe(text, 'cut',     delayedResize);
		    observe(text, 'paste

了解本专栏