当前位置： 移动技术网 > IT编程>网页制作>CSS > textarea高度自增代码教程

textarea高度自增代码教程

2018年03月28日  | 移动技术网IT编程  | 我要评论

陈秋佩,马子跃近况,超大壁纸

textarea高度自增代码教程

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元素
		    var textBox = document.getElementById('textBox');//textarea父级元素  可有可无
		    function resize () {
		        text.style.height = 'auto';
		        text.style.height = text.scrollHeight+7+'px';
		        textBox.style.height = text.scrollHeight+26+'px';
		    }
		    /* 0-timeout to get the already changed text */
		    function delayedResize () {
		        window.setTimeout(resize, 0);
		    }
		    observe(text, 'change',  resize);
		    observe(text, 'cut',     delayedResize);
		    observe(text, 'paste',   delayedResize);
		    observe(text, 'drop',    delayedResize);
		    observe(text, 'keydown', delayedResize);
		
		    text.focus();
		    text.select();
		    resize();
		}
		init()

通过获取textarea的scrollHeight来实现高度自增，类似微信的输入框。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网