Bagaimanakah Prototype.js Boleh Autosize Textarea Secara Menegak Sambil Mengekalkan Lebar Tetap?

Mengautomatiskan Textarea dengan Prototaip untuk UI Diperhalusi

Meningkatkan pengalaman pengguna selalunya melibatkan pemfokusan pada butiran halus tetapi memberi kesan. Salah satu aspek tersebut ialah mengautomasikan kawasan teks, memberikan mereka keupayaan untuk menyesuaikan diri dengan kandungan yang mereka pegang, memastikan penggunaan ruang yang optimum dan kebolehbacaan.

Dalam kes ini, pengguna menyasarkan untuk mengubah saiz kawasan teks secara menegak sambil mengekalkan lebar tetap . Walaupun saiz semula mendatar boleh mencabar kerana pembalut perkataan dan panjang baris yang berbeza-beza, saiz semula menegak ialah penyelesaian yang berdaya maju dan mesra pengguna.

Untuk melaksanakan tingkah laku autosaiz ini, mereka mendapatkan panduan dan menemui penyelesaian praktikal menggunakan Prototaip, a perpustakaan JavaScript yang popular. Coretan kod yang disediakan mempamerkan pendekatan:

resizeIt = function() {
  var str = $('text-area').value;
  var cols = $('text-area').cols;

  var linecount = 0;
  $A(str.split("\n")).each( function(l) {
      linecount += Math.ceil( l.length / cols ); // Take into account long lines
  })
  $('text-area').rows = linecount + 1;
};

Event.observe('text-area', 'keydown', resizeIt );

resizeIt(); //Initial on load

Kod ini berulang melalui setiap baris kandungan dalam kawasan teks, mempertimbangkan pemisah baris dan garisan panjang, serta mengira bilangan baris yang diperlukan untuk kesesuaian yang selesa. Dengan melampirkan pendengar acara untuk menangkap ketukan kekunci, kawasan teks terus diubah saiznya sebagai tindak balas kepada perubahan teks, mempersembahkan pengalaman penyesuaian dan mengutamakan pengguna.

Menggunakan strategi ini boleh menyelaraskan interaksi pengguna, mengurangkan keperluan untuk menatal yang tidak perlu dan memastikan antara muka yang lancar dan menarik secara visual untuk input teks.

Atas ialah kandungan terperinci Bagaimanakah Prototype.js Boleh Autosize Textarea Secara Menegak Sambil Mengekalkan Lebar Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!