Bagaimana untuk Auto-Size Textarea dengan JavaScript Tulen?

Textarea Auto Height

Soalan ini bertujuan untuk menghapuskan bar skrol kawasan teks dan melaraskan ketinggiannya agar sepadan dengan kandungan di dalamnya. Penyelesaian menggunakan kod JavaScript tulen disediakan:

<code class="js">function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}</code>

Untuk memastikan ketinggian textarea diubah saiz secara dinamik apabila teks dimasukkan, fungsi ini dicetuskan oleh peristiwa oninput. Selain itu, sifat CSS textarea boleh dilaraskan untuk melumpuhkan saiz semula dan limpahan, sambil menetapkan ketinggian minimum dan maksimum jika dikehendaki:

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

Dengan melaksanakan pelarasan ini, textarea akan melaraskan ketinggiannya secara automatik agar sepadan dengan kandungan, menghapuskan keperluan untuk bar skrol sambil memastikan pengalaman pengguna yang anggun dan responsif.

Atas ialah kandungan terperinci Bagaimana untuk Auto-Size Textarea dengan JavaScript Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!