Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencipta Textareas Penyesuaian Sendiri dalam JavaScript?

Bagaimanakah Saya Boleh Mencipta Textareas Penyesuaian Sendiri dalam JavaScript?

Patricia Arquette
Patricia Arquetteasal
2024-12-15 06:30:11417semak imbas

How Can I Create Self-Adjusting Textareas in 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