Bagaimana untuk Autosize Textarea Menggunakan Prototaip untuk Pengalaman Pengguna yang Diperbaiki?

Mengautomatiskan Textarea dengan Prototaip

Untuk meningkatkan pengalaman pengguna, textareas selalunya wajar melaraskan saiznya secara automatik berdasarkan kandungan mereka mengandungi. Ini menghapuskan keperluan untuk bar skrol dan memastikan keseluruhan teks kelihatan. Menggunakan Prototaip, kefungsian autosaiz ini boleh dilaksanakan dengan mudah.

Masalah:

Aplikasi jualan dalaman memerlukan kawasan teks untuk butiran alamat. Adalah diperhatikan bahawa saiz kawasan teks tetap sama ada mengakibatkan ruang menegak yang berlebihan atau pemotongan baris alamat. Penyelesaiannya adalah dengan melaraskan ketinggian kawasan teks secara dinamik apabila kandungan teks berubah.

Penyelesaian:

Prototaip menyediakan kaedah mudah untuk mengautomasikan kawasan teks. Berikut ialah kod JavaScript:

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

  $('iso_address').rows = linecount;
};</code>

Pelaksanaan:

1. Tentukan fungsi resizeIt() untuk mengira bilangan baris yang diperlukan berdasarkan kandungan textarea.
2. Tambahkan pendengar acara pada textarea untuk mencetuskan fungsi resizeIt() pada keyup atau keydown.
3. Mulakan saiz textarea pada pemuatan halaman dengan memanggil resizeIt().

Dengan menggunakan kaedah ini, kawasan teks akan melaraskan ketinggiannya secara automatik untuk menampung sebarang perubahan dalam kandungan teks. Lebar kawasan teks boleh ditetapkan atau dinamik, bergantung pada gelagat yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Autosize Textarea Menggunakan Prototaip untuk Pengalaman Pengguna yang Diperbaiki?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!