Cara Mengubah Saiz Kawasan Teks Secara Dinamik Berdasarkan Kandungan Menggunakan Prototype.js untuk Pengalaman Pengguna yang Dipertingkat

Mengautomatiskan Textarea dengan Prototaip

Mengubah saiz kawasan teks agar sesuai dengan kandungannya secara dinamik boleh meningkatkan pengalaman pengguna dengan menghapuskan penatalan yang tidak perlu. Dalam kes ini, kami menyasarkan untuk mencapai saiz semula menegak sambil mengekalkan kebolehbacaan dengan saiz fon yang besar.

Prototaip Penyelesaian

Menggunakan Prototaip, kami boleh melaksanakan fungsi saiz semula sebagai berikut:

<code class="js">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);
  })

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

Event.observe('iso_address', 'keydown', resizeIt);</code>

Kod ini mengira bilangan baris berdasarkan kandungan teks dan lebar kawasan teks. Ia dicetuskan oleh peristiwa keydown, memastikan ia menangkap aksara yang baru ditaip.

Saiz Semula Menegak Sahaja

Kami menyasarkan saiz semula menegak secara khusus kerana saiz semula mendatar boleh membawa kepada akibat yang tidak diingini, terutamanya dengan balutan perkataan dan baris panjang.

Pertimbangan Pelaksanaan

Kod tersebut menganggap textarea mempunyai ID 'iso_address'. Laraskan ini mengikut keperluan dalam aplikasi anda.

Walaupun kod ini mengubah saiz kawasan teks secara menegak secara berkesan, adalah penting untuk ambil perhatian bahawa ia tidak dioptimumkan untuk sejumlah besar teks atau aplikasi intensif prestasi. Untuk senario sedemikian, pengoptimuman dan ujian tambahan mungkin diperlukan.

Atas ialah kandungan terperinci Cara Mengubah Saiz Kawasan Teks Secara Dinamik Berdasarkan Kandungan Menggunakan Prototype.js untuk Pengalaman Pengguna yang Dipertingkat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!