textarea高度自增

你的名字 2022-05-28 01:00 162阅读 0赞

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',   delayedResize);
    		    observe(text, 'drop',    delayedResize);
    		    observe(text, 'keydown', delayedResize);
    		
    		    text.focus();
    		    text.select();
    		    resize();
    		}
    		init()

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

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 textarea的高度自适应

textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。例

柔情只为你懂/ 2022年09月29日 15:55/ 0 赞/ 294 阅读

相关 textarea 自适应内容高度

$('textarea').each(function(){ this.setAttribute('style', 'height:' + (this.s

约定不等于承诺〃/ 2022年06月09日 08:48/ 0 赞/ 268 阅读

相关 textarea高度自适应

之前虽然写了几篇关于textarea的高度自适应的解决方案，但都不甚满意，最近从Element的源码中得到启示，就自己写了一个textarea高度自适应的jquery插件。

ゞ浴缸里的玫瑰/ 2022年06月02日 07:09/ 0 赞/ 368 阅读

相关 textarea高度自增

var observe; if (window.attachEvent) { observe = function (eleme

你的名字/ 2022年05月28日 01:00/ 0 赞/ 163 阅读

相关 textarea 自适应宽度和高度

场景分析解决场景经常与遇到处理文字域的问题, 需要继承父级的宽度分析 `te

「爱情、让人受尽委屈。」/ 2022年05月18日 08:20/ 0 赞/ 436 阅读

相关 textarea高度自适应

方法一、直接在textarea中添加oninput方法： <textarea οninput="this.style.height = this.scrollHeight +

超、凢脫俗/ 2022年04月05日 15:40/ 0 赞/ 346 阅读

相关 textarea高度自适应

textarea的高度根据键入的长度自适应高度，利用input事件，获取长度和设置高度； document.getElementById("text-adaption

谁践踏了优雅/ 2022年04月04日 06:22/ 0 赞/ 379 阅读

相关编写自适应高度的 textarea

文本框是很常见的输入控件，我相信只要写过表单的肯定接触过 [textarea][] 这个元素。 OK。但是现在产品经理说了：需要这个文本框可以根据用户输入内容自适应其高度。

﹏ヽ暗。殇╰゛Y/ 2022年03月07日 13:48/ 0 赞/ 521 阅读

相关 textarea高度自适应，随着内容增加高度增加

原文出处：[https://www.cnblogs.com/purple04551/p/8075366.html][https_www.cnblogs.com_purple04

女爷i/ 2022年01月15日 04:05/ 0 赞/ 313 阅读

相关 textarea 自适应宽度和高度

css样式： .textarea-inherit { width: 100%; overflow: auto; wor

悠悠/ 2021年11月22日 13:08/ 2 赞/ 501 阅读