Bagaimana untuk Melaraskan Ketinggian Kawasan Teks Secara Automatik agar Sesuai dengan Kandungan?

Pelarasan Ketinggian untuk Kawasan Teks

Ramai pembangun menghadapi cabaran untuk membuat elemen textarea melaraskan ketinggiannya secara automatik untuk menampung kandungan yang terkandung di dalamnya. Ini meningkatkan pengalaman pengguna dengan mengalih keluar bar skrol yang tidak diperlukan.

Untuk menangani keperluan ini, penyelesaian berasaskan JavaScript tersedia:

function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}

Bersama-sama dengan kod JavaScript ini, gaya CSS boleh dilaksanakan untuk mengendalikan estetika textarea:

textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}

Pelaksanaan HTML menggunakan acara oninput untuk mencetuskan pelarasan ketinggian:

<textarea oninput="auto_grow(this)"></textarea>

Dengan pendekatan ini, textarea akan secara automatik mengembang atau mengecut berdasarkan ketinggiannya pada jumlah teks yang dimasukkan, mengalih keluar keperluan untuk bar skrol dan memastikan pengalaman pengguna yang lancar.

Atas ialah kandungan terperinci Bagaimana untuk Melaraskan Ketinggian Kawasan Teks Secara Automatik agar Sesuai dengan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!