Bir metin alanını PHP veya JavaScript kullanmadan içeriğine sığacak şekilde genişletmenin bir yolu var mı?

95

Kullanıcının düzenleyeceği içerikle bir metin alanını dolduruyorum.

İçeriği CSS ile sığdırmak için uzatmak mümkün mü ( overflow:showbir div için olduğu gibi )?

html css

— önem
kaynak

1

Çerçeve kullanmayan herhangi bir hata içermeyen bir cevabı yok mu? :-(

— starbeamrainbowlabs

Ben sadece css max-width: 100% 'ü kullanıyorum ve otomatik olarak bir kutuya sığıyor. Bununla ilgili bir sorun var mı?

— yashas123

42

Pek sayılmaz. Bu normalde javascript kullanılarak yapılır.

burada bunu yapmanın yolları hakkında güzel bir tartışma var ...

Prototip kullanarak metin alanını otomatik boyutlandırma

— Rik Heywood
kaynak

210

sadece bir satır

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

— Martin Prestone
kaynak

8

bunun nasıl sadece iki oyu var? bu inanılmaz Martin. Bunu çözmeye çalışmak için 30 dakikamı harcadım. Harika iş.

— Philip Duffney

30

Bu harika. Ben değişen eklemek sadece çok istediğiniz this.scrollHeight + "px"için this.scrollHeight + 3 + "px"yapar textarea büyük yeterince o kaydırma çubuğu göstermez olması.

— maarten

Sorun: Kullanıcı aşağı kaydıracak kadar yazdığında, Enter ile yeni bir satır eklediği her seferinde kaydırma konumunu sıfırlar.

— Costa

5

Bunun eski bir soru olduğunu biliyorum, ancak bir düzenleme sayfasında bir metin alanım var ve sayfa yüklendiğinde zaten bir değeri var, o zaman içeriğe sığması için onu nasıl genişletebilirim?

— Arootin Aghazaryan

1

@ArootinAghazaryan - Zaten bir çözüm bulmuş olabilirsiniz, ancak başkaları için: HTML'de satır içi olması yerine yeniden boyutlandırma koduyla bir işlev oluşturun. Daha sonra aynı işlevi sayfa yüklemede çağırabilirsiniz.

— Magnus Eriksson

6

İşte jQuery ile çalışan bir işlev (yalnızca yükseklik için, genişlik için değil):

function setHeight(jq_in){
    jq_in.each(function(index, elem){
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    });
}
setHeight($('<put selector here>'));

Not: Operatör, Javascript kullanmayan bir çözüm istedi, ancak bu, bu soruyla karşılaşan birçok kişiye yardımcı olmalıdır.

— Chris Dutrow
kaynak

5

Bu çok basit bir çözüm ama benim için çalışıyor:

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>

Snippet'i genişlet

— NicB
kaynak

2

Kutunun yüksekliği, yalnızca yeni satırlarda değil, her tuş vuruşunda artar . Geri al ve sil bile yüksekliğin artmasına neden olur. Düzeltin ve olumlu oyu geri alacaksınız.

— Birrel

IE gibi bazı tarayıcılar kaydırma yüksekliğini tam olarak hesaplamaz, bu da bu tür sorunlara neden olabilir. bunun benim için Chrome'da da olduğunu

— boşver

1

çözüm şu

<style>   textarea {     resize: none;     overflow: auto;   } </style>  <!--TEXT-AREA--> <textarea onkeyup="setHeight.call(this);">Hello World</textarea>  <!--JAVASCRIPT--> <script type="text/javascript"> function setHeight(){     this.style.height = '1px';     this.style.height = this.scrollHeight + 'px'; } </script>

— şekildedir

3

Dinamik metin alanı kontrolü için başka bir basit çözüm.

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 });
</script>

Snippet'i genişlet

— Krutika Patel
kaynak