Bolehkah Textareas Melaraskan Tingginya Secara Automatik agar Sesuai dengan Kandungan?

Bolehkah Textareas Melaraskan Tingginya Secara Automatik untuk Menampung Kandungan?

Memperluaskan soalan, selalunya wajar untuk mempunyai textareas melaraskan ketinggiannya secara automatik untuk menampung kandungan dinamik mereka. Kaedah limpahan konvensional yang digunakan untuk div, seperti "overflow:show," tidak boleh digunakan dalam senario ini.

Penyelesaian Berasaskan CSS: Pelarasan Ketinggian Dinamik

Mujurlah, terdapat penyelesaian CSS yang mudah dan elegan untuk masalah ini. Dengan menggunakan kod berikut, textarea boleh dikonfigurasikan untuk meregangkan agar sesuai dengan kandungannya dengan lancar:

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

Dalam skrip ini, pendengar acara "oninput" mengesan perubahan pada kandungan textarea. Ia kemudiannya secara dinamik menetapkan ketinggian textarea untuk dipadankan dengan sifat "scrollHeight", yang mewakili ketinggian sebenar yang diperlukan oleh kandungan. Baris tambahan "this.style.height = "";" membolehkan kawasan teks mengecut serta meregang.

Pelaksanaan dan Faedah

Penyelesaian ini menawarkan cara yang ringan dan cekap untuk memastikan kawasan teks melaraskan ketinggiannya secara automatik, memberikan lebih pengalaman mesra pengguna dan responsif untuk pengguna akhir. Ia menghapuskan keperluan untuk skrip PHP atau JavaScript yang kompleks, menjadikannya mudah disesuaikan walaupun oleh pembangun baru.

Atas ialah kandungan terperinci Bolehkah Textareas Melaraskan Tingginya Secara Automatik agar Sesuai dengan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!