Bagaimana untuk Mencipta Ketinggian Textarea Penyesuaian Sendiri dengan JavaScript dan CSS?

Textarea Auto Height

Apabila menyentuh elemen Textarea, mengurus ketinggiannya boleh menjadi penting untuk meningkatkan pengalaman pengguna dan mengekalkan estetika anda aplikasi web. Kadangkala, anda mungkin mahu ketinggian kawasan teks anda dilaraskan secara automatik berdasarkan jumlah teks yang terkandung di dalamnya.

Satu penyelesaian yang berkesan untuk mencapainya ialah melalui JavaScript dan CSS. Berikut ialah panduan langkah demi langkah untuk melaksanakannya:

JavaScript:

1. Buat fungsi JavaScript untuk mengira dan mengemas kini textarea ketinggian:

function auto_grow(element) {
  // Set the initial height to a small value (e.g., 5px)
  element.style.height = "5px";

  // Calculate the new height based on the scrollHeight property
  element.style.height = (element.scrollHeight) + "px";
}

CSS:

2. Gayakan kawasan teks untuk mengelakkan penatalan menegak dan tetapkan minimum dimensi:

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

HTML:

3. Tambahkan pendengar acara untuk memanggil fungsi auto_grow apabila kandungan textarea berubah:

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

Dengan melaksanakan penyelesaian ini, ketinggian kawasan teks akan melaraskan secara automatik sebagai teks dimasukkan atau dialih keluar, memberikan pengalaman pengguna yang dinamik dan mudah.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Ketinggian Textarea Penyesuaian Sendiri dengan JavaScript dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!