站内搜索:
首页 >> 前端 >> 内容
textarea高度自增代码教程

时间:2018/3/27 11:14:43

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来实现高度自增,类似微信的输入框。

  • 上一篇:wampserver能启动localhost但不能打开自己的项目如何解决?
  • 下一篇:html打包桌面应用的快速上手教程
  • 返回顶部