Otomatik boyutlandırma ile button oluşturma

SORU

17 Ocak 2009, CUMARTESİ

Otomatik boyutlandırma ile button oluşturma

Denedim another thread about this vardı. Ama bir sorun var: button eğer içeriği silerseniz küçültmek değil. Doğru boyuta küçültmek için herhangi bir yol bulamadım - clientHeight değeri button tam boyutu, içeriği olarak geri geliyor.

Bu sayfadan kod aşağıda. Herhangi bir yardım veya işaretçiler takdir ediyorum.

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 )
    };
}

CEVAP

18 Mart 2011, Cuma

Bu benim (3.6/4.0 ve Krom 10/11 Firefox) için çalışır:

<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
    resize: none;
}
</style>
<script type="text/javascript">
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();
}
</script>
</head>
<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>

jsfiddle dene istersen Tek bir çizgi ile başlar ve sadece tam miktarı gerekli büyür. Ok için bir tek textarea ama yazmak istedim bir yere davet ederdim yıllar böyle textareas (yaklaşık olarak bir normalde olması hatlarında büyük bir metin belgesi). Bu durumda çok yavaş. (Onun delicesine yavaş Firefox.) Gerçekten saf css kullanan bir yaklaşım istiyor. Bu contenteditable ile mümkün olur ama düz metin-sadece olmak istiyorum.

Bunu Paylaş: