Bagaimanakah Prototype.js Boleh Mengubah Saiz Teks secara Automatik?

Mengautomatiskan Textareas dengan Prototaip

Apabila mereka bentuk antara muka pengguna, selalunya dikehendaki untuk mengubah saiz kawasan teks secara automatik untuk menampung jumlah teks yang berbeza-beza. Prototaip, rangka kerja JavaScript, menyediakan penyelesaian yang mudah untuk mencapai kesan ini.

Saiz Semula Menegak

Saiz semula menegak ialah pendekatan praktikal yang membolehkan kawasan teks berkembang atau mengecut secara menegak berdasarkan bilangan baris teks. Untuk melaksanakan ini menggunakan Prototaip, kod berikut boleh digunakan:

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

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

Dalam kod ini, fungsi resizeIt ditakrifkan. Ia mengira bilangan baris dalam kawasan teks dengan membahagikan teks pada aksara baris baharu dan menambah satu untuk setiap baris, dengan mengambil kira kemungkinan bungkus perkataan. Fungsi itu kemudian menetapkan atribut baris bagi kawasan teks kepada kiraan baris yang dikira.

Mengaktifkan Fungsi

Untuk mengaktifkan kelakuan mengubah saiz, fungsi resizeIt boleh terikat kepada acara, seperti keyup atau keydown, dalam perkara berikut cara:

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

Contoh Penggunaan

Contoh berikut menunjukkan cara menggunakan fungsi autosaiz pada kawasan teks:

<textarea></textarea>

Kod ini mencipta kawasan teks dengan satu baris dan 50 lajur, dan mengubah saiznya secara automatik untuk menampung teks seperti sedia ada telah masuk.

Atas ialah kandungan terperinci Bagaimanakah Prototype.js Boleh Mengubah Saiz Teks secara Automatik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!