Bagaimanakah Saya Boleh Mencipta Textarea Saiz Semula Auto yang Mengecut dan Berkembang dengan Kandungan?

Mencipta Textarea dengan Auto-Ubah Saiz

Dalam perbincangan sebelum ini, kaedah untuk mencipta kawasan teks saiz semula automatik telah dibentangkan. Walau bagaimanapun, pengehadan kekal: textarea gagal mengecut apabila kandungan dipadamkan. Isu penting terletak pada mendapatkan ketinggian kandungan textarea yang betul.

Penyelesaian Lengkap

Kod berikut menyediakan penyelesaian komprehensif yang menangani batasan yang dihadapi dengan kaedah sebelumnya:

$("textarea").each(function () {
  this.style.height = this.scrollHeight + "px";
  this.style.overflowY = "hidden";
}).on("input", function () {
  this.style.height = "auto";
  this.style.height = this.scrollHeight + "px";
});

Kelebihan:

• Berfungsi pada input kekunci
• Menyokong teks yang ditampal (klik kanan & ctrl v)
• Mengendalikan teks yang dipotong (klik kanan & ctrl x)
• Menampung teks pramuat
• Berlaku untuk semua kawasan teks (kotak teks berbilang baris) seluruh tapak
• Serasi dengan Firefox, Chrome, IE, Edge, iOS Safari dan Penyemak Imbas Android
• Mematuhi mod JavaScript yang ketat

Pelaksanaan:

1. Sertakan perpustakaan jQuery dalam skrip induk anda fail.
2. Salin coretan kod JavaScript ke dalam fail skrip induk.
3. Kawasan teks pelarasan kendiri kini tersedia untuk digunakan di tapak web anda.

Dengan ini kod yang dipertingkatkan, kawasan teks kini boleh mengubah saiz secara automatik dengan mudah, memberikan pengalaman yang mesra pengguna dan konsisten merentas pelbagai platform dan penyemak imbas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Textarea Saiz Semula Auto yang Mengecut dan Berkembang dengan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!