Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencipta Ketinggian Textarea Penyesuaian Sendiri dengan CSS dan JavaScript?

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

Susan Sarandon
Lepaskan: 2024-12-13 22:52:10
asal
608 orang telah melayarinya

How to Create a Self-Adjusting Textarea Height with CSS and 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%;
}
Salin selepas log masuk

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";
}
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan