Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencipta Textareas Penyesuaian Sendiri dalam JavaScript?
Auto-height Textareas
Satu cabaran biasa apabila bekerja dengan textareas ialah memastikan mereka melaraskan ketinggiannya untuk menampung input pengguna tanpa memerlukan bar skrol. Kebimbangan ini timbul dalam senario di mana kandungan textarea sering berbeza-beza panjangnya. Begini cara anda boleh mencapainya menggunakan JavaScript tulen:
Coretan kod yang disediakan memanfaatkan fungsi JavaScript bernama auto_grow yang melaraskan ketinggian kawasan teks secara dinamik berdasarkan kandungannya:
function auto_grow(element) { element.style.height = "5px"; element.style.height = (element.scrollHeight) + "px"; }
Dalam CSS, anda boleh menentukan gaya berikut untuk mengalih keluar bar skrol dan menetapkan minimum dan maksimum ketinggian:
textarea { resize: none; overflow: hidden; min-height: 50px; max-height: 100px; }
Untuk melaksanakan fungsi ini, cuma tambahkan atribut oninput pada
<textarea oninput="auto_grow(this)"></textarea>
Dengan pelaksanaan ini, kawasan teks anda akan melaraskan ketinggiannya secara automatik agar sepadan dengan panjang kandungannya, memberikan pengalaman pengguna yang lancar tanpa memerlukan bar skrol .
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Textareas Penyesuaian Sendiri dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!