Apakah ada cara untuk membuat area teks meregang agar sesuai dengan kontennya tanpa menggunakan PHP atau JavaScript?

95

Saya mengisi textarea dengan konten untuk diedit oleh pengguna.

Apakah mungkin untuk membuatnya meregang agar sesuai dengan konten dengan CSS (seperti overflow:showuntuk div)?

html css

— makna
sumber

1

Tidak adakah yang punya jawaban yang tidak memiliki bug yang tidak menggunakan kerangka kerja? :-(

— starbeamrainbowlabs

Saya cukup menggunakan css max-width: 100% dan secara otomatis cocok dengan sebuah kotak. Ada masalah dengan itu?

— yashas123

42

Tidak juga. Ini biasanya dilakukan dengan menggunakan javascript.

ada diskusi yang bagus tentang cara melakukan ini di sini ...

Mengubah ukuran area teks secara otomatis menggunakan Prototipe

— Rik Heywood
sumber

210

satu baris saja

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

— Martin Prestone
sumber

8

bagaimana ini hanya memiliki dua suara. ini luar biasa Martin. Saya hanya menghabiskan 30 menit mencoba menyelesaikan ini. Kerja bagus.

— Philip Duffney

30

Ini bagus. Saya hanya ingin menambahkan perubahan itu this.scrollHeight + "px"untuk this.scrollHeight + 3 + "px"membuat textarea cukup besar agar tidak menampilkan scrollbar.

— maarten

Masalah: Ketika pengguna menulis cukup untuk menggulir ke bawah, itu mengatur ulang posisi gulir setiap kali mereka menambahkan baris baru dengan Enter.

— Costa

5

Saya tahu ini adalah pertanyaan lama, tetapi saya memiliki textarea pada halaman edit, dan sudah memiliki nilai saat halaman dimuat, lalu bagaimana cara membuatnya diperluas agar sesuai dengan konten?

— Arootin Aghazaryan

1

@ArootinAghazaryan - Anda mungkin sudah menemukan solusinya, tetapi untuk orang lain: Buat saja fungsi dengan kode pengubah ukuran alih-alih membuatnya sebaris di HTML. Kemudian Anda dapat memanggil fungsi yang sama saat memuat halaman.

— Magnus Eriksson

6

Berikut adalah fungsi yang bekerja dengan jQuery (hanya untuk tinggi, bukan lebar):

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

Catatan: Operator meminta solusi yang tidak menggunakan Javascript, namun hal ini akan membantu banyak orang yang menemukan pertanyaan ini.

— Chris Dutrow
sumber

5

Ini adalah solusi yang sangat sederhana, tetapi berhasil untuk saya:

<!--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>

Luaskan cuplikan

— NicB
sumber

2

Ketinggian kotak meningkat dengan setiap penekanan tombol, bukan hanya baris baru. Bahkan backspace dan delete menyebabkan ketinggian bertambah. Perbaiki, dan Anda akan mendapatkan suara positifnya kembali.

— Birrel

beberapa browser seperti IE tidak menghitung scrollheight dengan benar, yang dapat menyebabkan masalah semacam itu. tidak masalah itu juga terjadi pada saya di Chrome ...

— KthProg

1

inilah solusinya (edit antrian penuh):

<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>

pada dasarnya Anda harus mengatur tinggi ke 1px terlebih dahulu, karena ini: stackoverflow.com/questions/10722058/…

— KthProg

3

Solusi sederhana lainnya untuk kontrol textarea dinamis.

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

Luaskan cuplikan

— Krutika Patel
sumber