Bylo o tom jiné vlákno, které jsem zkoušel. Ale je tu jeden problém:textarea
nezmenší se, pokud obsah smažete. Nemohu najít žádný způsob, jak jej zmenšit na správnou velikost – clientHeight
hodnota se vrátí jako plná velikost textarea
, nikoli jeho obsah.
Kód z této stránky je níže:
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 ) }; }
Odpověď
Toto funguje pro mě (Firefox 3.6/4.0 a 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>
Pokud to chcete, zkuste to na jsfiddle Začíná na jedné linii a roste pouze přesně potřebné množství. Je to v pořádku pro jeden textarea
, ale chtěl jsem napsat něco, kde bych měl mnoho mnoho mnoho takových textarea
s (asi tolik, kolik by normálně měl řádky ve velkém textovém dokumentu). V tom případě je to opravdu pomalé. (Ve Firefoxu je to šíleně pomalé.) Takže bych opravdu chtěl přístup, který používá čisté CSS. To by bylo možné pomocí contenteditable
, ale chci, aby byl pouze prostý text.