有关于这个另一个线程,我已经试过。但是有一个问题:textarea删除内容不会缩小。我找不到任何将其缩小为正确大小的方法-该clientHeight值会以的完整大小返回textarea,而不是其内容的大小。
textarea
clientHeight
该页面上的代码如下:
function FitToContent(id, maxHeight) { var text = id && id.style ? id : document.getElementById(id); if ( !text ) return; var adjustedHeight = text.clientHeight; if ( !maxHeight || maxHeight > adjustedHeight ) { adjustedHeight = Math.max(text.scrollHeight, adjustedHeight); if ( maxHeight ) adjustedHeight = Math.min(maxHeight, adjustedHeight); if ( adjustedHeight > text.clientHeight ) text.style.height = adjustedHeight + "px"; } } window.onload = function() { document.getElementById("ta").onkeyup = function() { FitToContent( this, 500 ) }; }
这对我有效(Firefox 3.6 / 4.0和Chrome 10/11):
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'); function resize () { text.style.height = 'auto'; text.style.height = text.scrollHeight+'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(); } textarea { border: 0 none white; overflow: hidden; padding: 0; outline: none; background-color: #D0D0D0; } <body onload="init();"> <textarea rows="1" style="height:1em;" id="text"></textarea> </body>
如果您想在jsfiddle上尝试它,它以一行开始,并且仅增长所需的确切数量。可以使用一个textarea,但是我想写一些这样textarea的东西(在一个大的文本文档中通常有几行)。在那种情况下,它真的很慢。(在Firefox中,它是如此之慢。)因此,我真的很想使用纯CSS的方法。使用,这是可能的contenteditable,但是我希望它只能是纯文本格式。
contenteditable