Bagaimana untuk Mencipta Ketinggian Textarea Penyesuaian Sendiri dengan CSS dan JavaScript?

Textarea Auto Height: Panduan Komprehensif

Apabila bekerja dengan textareas, selalunya wajar untuk melaraskan ketinggiannya secara automatik berdasarkan kandungan teks kepada alih keluar penatalan yang berlebihan atau ruang kosong. Berikut ialah penyelesaian terperinci menggunakan kedua-dua CSS dan JavaScript untuk mencapai kesan ini:

Penggayaan CSS:

textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  padding: 15px 15px 30px;
  max-width: 100%;
}

CSS ini memastikan bahawa kawasan teks tidak boleh diubah saiz, menyembunyikan sebarang limpahan dan tetapkan ketinggian garisan serta pelapik yang sesuai.

JavaScript Logik:

function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}

Fungsi JavaScript ini digunakan untuk melaraskan ketinggian kawasan teks secara dinamik berdasarkan kandungannya. Ia menetapkan ketinggian awal 5px dan kemudian mengubah saiznya kepada sifat scrollHeight, yang mewakili ketinggian sebenar kandungan teks.

Pengintegrasian HTML:

<textarea oninput="auto_grow(this)"></textarea>

Lampirkan pendengar acara oninput pada textarea, yang mencetuskan fungsi auto_grow() apabila pengguna memasukkan teks.

Pelaksanaan:

Gabungkan penggayaan CSS, fungsi JavaScript dan penyepaduan HTML untuk mencipta kawasan teks yang melaraskan ketinggiannya secara automatik semasa anda menaip, memberikan lebih ramai pengguna -pengalaman mesra dan menyenangkan dari segi estetika.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Ketinggian Textarea Penyesuaian Sendiri dengan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!