Bagaimanakah Saya Boleh Melaksanakan Fungsi Auto-Resizing Textarea Menggunakan Prototype.js?

Melaksanakan Auto-Resizing TextArea dengan Prototaip

Untuk meningkatkan pengalaman pengguna dalam aplikasi jualan dalaman anda, pertimbangkan untuk menambah fungsi auto-saiz semula pada textarea yang digunakan untuk alamat penghantaran. Berikut ialah panduan terperinci untuk mencapai matlamat ini:

Matlamatnya adalah untuk mencipta kawasan teks yang melaraskan ketinggiannya secara dinamik untuk menampung input teks, memastikan penggunaan ruang yang optimum dan kebolehbacaan. Untuk berbuat demikian, kami akan memanfaatkan Prototaip, rangka kerja JavaScript.

Mula-mula, tambahkan kod JavaScript yang diperlukan pada halaman anda:

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount += 1 + Math.floor(l.length / cols); // Consider long lines
  })

  $('iso_address').rows = linecount;
};

Kod ini mengira bilangan baris teks dalam kawasan teks berdasarkan kiraan aksara, lebar lajur dan pemisah baris. Nilai yang terhasil diberikan kepada sifat "rows" bagi textarea, mengubah saiznya dengan berkesan.

Untuk mengaktifkan auto-saiz semula, lampirkan fungsi resizeIt pada acara yang sesuai. Contohnya, anda boleh menggunakan keyup untuk menangkap perubahan input teks:

Event.observe('iso_address', 'keyup', resizeIt);

Apabila kawasan teks mula-mula dimuatkan, panggil fungsi resizeIt untuk memulakan ketinggian:

resizeIt();

Dengan pelaksanaan ini, textarea akan melaraskan ketinggiannya secara automatik semasa pengguna menaip, mengoptimumkan ruang menegak borang dan memastikan maklumat alamat dibentangkan dalam bentuk yang boleh dibaca cara.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Fungsi Auto-Resizing Textarea Menggunakan Prototype.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!