Bagaimana untuk Melaksanakan Auto-Resizing TextAreas Menggunakan Prototaip JavaScript?

Cara Mengubah Saiz Kawasan Teks Secara Automatik Menggunakan Prototaip

Untuk pengalaman pengguna yang menarik secara visual, anda mungkin menginginkan kawasan teks yang melaraskan ketinggiannya berdasarkan kandungan teksnya. Di bawah, kami meneroka penyelesaian menggunakan rangka kerja JavaScript Prototaip.

Saiz Semula Menegak

Saiz semula menegak ialah pelaksanaan biasa, seperti yang ditunjukkan oleh Facebook semasa mengedit siaran dinding. Ia memastikan bahawa textarea menampung semua teks tanpa jarak yang berlebihan.

Pelaksanaan JavaScript

Berikut ialah coretan kod JavaScript yang mempamerkan autosaiz menegak menggunakan Prototaip:

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

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

  $('textarea-id').rows = linecount;
};

Penggunaan

Untuk melaksanakan autosaiz, anda boleh melampirkannya pada acara 'keydown' elemen textarea tertentu seperti:

Event.observe('textarea-id', 'keydown', resizeIt );

Saiz Semula Mendatar

Saiz semula mendatar tidak digalakkan kerana kemungkinan isu dengan pembungkusan perkataan, baris panjang dan masalah reka letak lain.

Kesimpulan

Mengautomasi kawasan teks menggunakan JavaScript menyediakan antara muka yang lebih dinamik dan mesra pengguna. Kod yang disediakan menggunakan Prototaip ialah penyelesaian yang mudah dan berkesan untuk mengubah saiz menegak. Walau bagaimanapun, perlu diingati had dan potensi cabaran untuk mengubah saiz mendatar apabila mempertimbangkan pelaksanaan anda.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Auto-Resizing TextAreas Menggunakan Prototaip JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!