Bagaimana untuk Autosize Textarea Secara Menegak Menggunakan Prototaip?

Mengautomatiskan Textarea dengan Prototaip

Meluaskan tanggapan untuk meningkatkan pengalaman pengguna dengan mengubah saiz kawasan teks secara automatik berdasarkan kandungannya, mari kita mendalami penyelesaian terperinci menggunakan Prototaip.

Melaksanakan Menegak Saiz semula

Untuk menampung panjang garis yang berbeza-beza, saiz semula menegak terbukti menjadi pilihan yang berdaya maju. Dengan mengira bilangan baris yang diduduki oleh teks, kami boleh melaraskan baris kawasan teks dengan sewajarnya.

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); // Take into account long lines
  })

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

Pendengar Acara untuk Ketukan Kekunci

Untuk memastikan saiz semula tepat pada masanya selepas setiap ketukan kekunci, kami melampirkan pendengar acara pada textarea:

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

Pertimbangan Mengubah Saiz Mendatar

Walaupun saiz semula mendatar mungkin kelihatan wajar, ia memberikan cabaran kerana balutan perkataan dan baris panjang, yang berpotensi menyebabkan isu reka letak. Oleh itu, saiz semula menegak lebih disukai dalam kebanyakan kes.

Contoh Penyepaduan

Dalam contoh HTML JavaScript yang disediakan, kami menunjukkan kefungsian autosaiz dalam tetapan praktikal, mendayakan kawasan teks untuk melaraskan saiz menegaknya apabila input teks pengguna berubah.

Atas ialah kandungan terperinci Bagaimana untuk Autosize Textarea Secara Menegak Menggunakan Prototaip?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!