Bagaimana untuk Mengubah Saiz Teks secara Automatik dengan Prototaip?

Autosaiz semula kawasan Teks dengan Prototaip

Meluaskan idea untuk meningkatkan pengalaman pengguna dengan mengubah saiz kawasan teks secara automatik, artikel ini mengupas tentang penyelesaian menggunakan rangka kerja JavaScript Prototaip. Matlamatnya adalah untuk melaraskan ketinggian kawasan teks berdasarkan jumlah teks yang terkandung di dalamnya, meningkatkan estetika dan kebolehbacaan.

Saiz Semula Menegak dengan Prototaip

Prototaip menyediakan cara yang mudah untuk dicapai tingkah laku ini. Setelah perpustakaan Prototaip dimuatkan, anda boleh melaksanakan skrip berikut:

resizeIt = function() {
  var str = $('iso_address').value; // Replace 'iso_address' with your textarea ID
  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;
};

Mengikat pada Acara

Untuk mencetuskan pelarasan kawasan teks pada input pengguna, anda boleh mengikat fungsi resizeIt kepada pengendali acara. Contohnya, untuk mengubah saiz pada input utama:

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

Penjelasan

Fungsi resizeIt:

• Mendapatkan semula nilai dan nombor textarea daripada lajur.
• Memisahkan teks kepada baris dan mengira bilangan baris yang diperlukan berdasarkan kiraan baris dan lebar lajur.
• Menetapkan atribut baris textarea kepada nilai yang dikira.

Petua Tambahan

Untuk pengalaman pengguna yang lebih baik, anda mungkin mahu mencetuskan semula saiz hanya selepas pengguna berhenti menaip untuk tempoh yang singkat (cth., menggunakan window.setTimeout).

Walaupun contoh JavaScript adalah mudah, ia tidak diuji sepenuhnya dan mungkin memerlukan pelarasan untuk keperluan kawasan teks khusus anda.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Teks secara Automatik dengan Prototaip?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!