Mengubah Saiz Kawasan Teks Secara Menegak dengan Prototaip: Bagaimana Menyesuaikan Ketinggian kepada Panjang Kandungan?

Mengubah Saiz Kawasan Teks secara Dinamik dengan Prototaip

Dalam usaha untuk mempertingkatkan pengalaman pengguna, anda mungkin menghadapi senario di mana mengubah saiz kawasan teks secara dinamik menjadi perlu. Di sini, kami akan meneroka cara melaksanakan pensaiz semula menegak menggunakan Prototaip.

Konteks Senario

Andaikan anda sedang membangunkan borang yang termasuk kawasan teks untuk menangkap alamat pengguna. Secara lalai, textarea menduduki kawasan tetap, yang boleh meninggalkan ruang kosong apabila alamat pendek atau melimpah apabila alamat panjang. Mengubah saiz kawasan teks secara dinamik menyelesaikan isu ini dengan menyesuaikan ketinggiannya kepada panjang kandungan.

Pelaksanaan Prototaip

Untuk melaksanakan pensaiz semula menegak dengan Prototaip, pertimbangkan kod JavaScript berikut:

<code class="javascript">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;
};</code>

Kod ini dimulakan dengan mengambil nilai textarea, bilangan lajur dan baris kandungan. Ia kemudian mengira bilangan baris yang diperlukan dengan membelah teks kepada baris dan membahagikan panjang dengan bilangan lajur. Hasilnya disimpan dalam atribut baris textarea.

Untuk mengaktifkan saiz semula, anda boleh melampirkan pendengar acara pada kawasan teks, seperti keyUp atau keyDown. Dalam contoh kami, keyUp digunakan untuk memastikan pelarasan berlaku selepas pengguna selesai menaip. Selain itu, memanggil resizeIt() pada beban halaman memastikan ketinggian awal ditetapkan dengan betul.

Faedah dan Pertimbangan

Saiz semula menegak meningkatkan pengalaman pengguna dengan melaraskan ketinggian textarea secara dinamik kepada jumlah kandungan, menghapuskan ruang yang tidak perlu dan menatal. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa saiz semula mendatar boleh menjadi tidak praktikal disebabkan oleh pembungkusan perkataan dan variasi panjang baris.

Sebagai langkah berjaga-jaga, adalah bijak untuk mengelak daripada menggunakan kod ini untuk kawasan teks yang mengandungi jumlah teks yang berlebihan, kerana ia boleh prestasi impak. Dengan mengambil kira itu, kod yang disediakan berfungsi sebagai titik permulaan dan anda mungkin perlu memperhalusinya agar sesuai dengan keperluan khusus anda.

Atas ialah kandungan terperinci Mengubah Saiz Kawasan Teks Secara Menegak dengan Prototaip: Bagaimana Menyesuaikan Ketinggian kepada Panjang Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!