Bagaimana untuk Melaksanakan Pelarasan Ketinggian Automatik dalam Medan Textarea?

Textarea Auto Height

Soalan ini meneroka cara melaraskan ketinggian textarea secara automatik agar sepadan dengan panjang kandungannya, dengan berkesan menghapuskan keperluan untuk bar skrol menegak.

Masalahnya berpunca daripada fakta bahawa secara lalai, kawasan teks mempunyai ketinggian tetap tanpa mengira jumlah teks yang terkandung di dalamnya. Jika teks melebihi ketinggian yang dipratentukan, ia menjadi tidak boleh diakses dan memerlukan penatalan.

Penyelesaian yang disediakan di sini menggunakan JavaScript tulen untuk melaraskan ketinggian kawasan teks berdasarkan kandungan sebenar. Fungsi yang dipanggil "auto_grow" ditakrifkan yang menetapkan ketinggian textarea kepada "5px" pada mulanya. Ini memastikan bahawa ia mempunyai ketinggian minimum. Selepas itu, ia membaca sifat "scrollHeight" bagi textarea, yang mewakili ketinggian kandungannya. Ketinggian kemudiannya dilaraskan untuk memadankan nilai ini, menjadikan ketinggian textarea dinamik dengan berkesan.

Untuk menyepadukan fungsi ini, CSS berikut disyorkan:

<code class="css">textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}</code>

CSs ini mengalih keluar terbina dalam mengubah saiz pemegang, menghalang limpahan yang kelihatan dan menetapkan sekatan ketinggian minimum dan maksimum.

Akhir sekali, untuk menggunakan auto-saiz, HTML berikut digunakan:

<code class="html"><textarea oninput="auto_grow(this)"></textarea></code>

Ini melampirkan "oninput " acara ke textarea, yang mencetuskan fungsi "auto_grow" apabila pengguna memasukkan teks. Akibatnya, ketinggian textarea melaraskan secara dinamik kepada panjang kandungannya, memberikan pengalaman pengguna yang lancar.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Pelarasan Ketinggian Automatik dalam Medan Textarea?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!