Bagaimana untuk Melaksanakan Pelarasan Ketinggian Textarea Dinamik tanpa Bar Skrol?

Textarea Auto Height Dilawati Semula

Soalan:

Ramai pembangun telah menghadapi keperluan untuk menyesuaikan diri ketinggian kawasan teks secara dinamik agar sesuai dengan kandungan di dalamnya. Ini bukan sahaja meningkatkan pengalaman pengguna tetapi juga menghapuskan bar skrol yang tidak diperlukan.

Penyelesaian:

Satu pendekatan untuk mencapai ini adalah melalui penggunaan JavaScript Tulen. Berikut ialah coretan kod yang melaraskan ketinggian kawasan teks dengan berkesan:

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

Dalam kod ini:

• elemen ialah kawasan teks yang anda mahu laraskan.
• Ketinggian awal ditetapkan kepada nilai kecil (5px) untuk membolehkan pengiraan tepat.
• Sifat scrollHeight mengembalikan ketinggian kandungan textarea, termasuk limpahan tersembunyi.
• Menetapkan ketinggian kepada ketinggian tatal melaraskannya secara dinamik agar sesuai dengan kandungan.

Untuk melaksanakan fungsi ini dalam CSS dan HTML:

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

<code class="html"><textarea oninput="auto_grow(this)"></textarea></code>

• saiz semula: tiada; menghalang kawasan teks daripada diubah saiz oleh pengguna.
• limpahan: tersembunyi; menyembunyikan sebarang kandungan berlebihan melebihi ketinggian yang ditetapkan.
• tinggi min dan ketinggian maks menentukan had ketinggian minimum dan maksimum.
• Peristiwa oninput mencetuskan fungsi auto_grow apabila input dalam kawasan teks berubah .

Penyelesaian ini memastikan ketinggian kawasan teks sepadan dengan kandungan yang terkandung di dalamnya, memberikan pengalaman pengguna yang lebih baik tanpa bar skrol.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Pelarasan Ketinggian Textarea Dinamik tanpa Bar Skrol?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!