Bolehkah Anda Laraskan Ketinggian Textarea Secara Dinamik dengan Hanya CSS?

Ketinggian Textarea Dinamik dengan CSS

Apabila mencipta kawasan teks untuk input pengguna, selalunya wajar untuk mengembang atau mengecut untuk menampung jumlah kandungan. Walaupun penyelesaian yang melibatkan JavaScript atau PHP wujud, adakah terdapat kaedah berasaskan CSS semata-mata?

Penyelesaian:

Ya, adalah mungkin untuk menggunakan CSS untuk mencapai kawasan teks dinamik ketinggian. Begini caranya:

1. Tetapkan ketinggian awal kepada auto: Untuk membenarkan kawasan teks membesar atau mengecut mengikut keperluan, tetapkan ketinggian awalnya kepada "auto":

textarea {
  height: auto;
}

2. Gunakan Acara 'oninput': Untuk melaraskan ketinggian kawasan teks secara dinamik, lampirkan pengendali acara 'oninput' padanya:

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

3. Tetapkan Semula Ketinggian Dahulu: Sebelum menetapkan ketinggian berdasarkan kandungan, mula-mula tetapkan semula kepada rentetan kosong. Ini memastikan kawasan teks boleh mengecut serta mengembang.
4. Kira Ketinggian Sebenar: Tentukan ketinggian sebenar kawasan teks berdasarkan kandungannya yang ditatal dan tambahkannya sebagai piksel pada sifat 'ketinggian' .

Dengan melaksanakan langkah-langkah ini, anda boleh mencipta kawasan teks yang akan melaraskan ketinggiannya secara automatik agar sesuai dengan kandungannya tanpa menggunakan JavaScript atau PHP.

Atas ialah kandungan terperinci Bolehkah Anda Laraskan Ketinggian Textarea Secara Dinamik dengan Hanya CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!