Bagaimana untuk Melaraskan Lebar Medan Input Teks Secara Dinamik Berdasarkan Kandungannya?

Pelarasan Lebar Medan Input Dinamik

Untuk mencapai medan input teks yang melaraskan lebarnya secara dinamik berdasarkan kandungannya, terdapat beberapa pendekatan untuk pertimbangkan:

1. Unit CSS ch:

Pelayar moden menyokong unit CSS ch, yang mewakili lebar aksara sifar dalam fon tertentu. Dengan menetapkan lebar medan input menggunakan ch, lebar akan berkembang secara automatik apabila input bertambah.

2. Pendengar Acara dalam JavaScript:

Menggunakan pendengar acara dalam JavaScript, nilai input boleh dipantau dan lebar boleh dilaraskan dengan sewajarnya. Setiap kali nilai berubah, fungsi resizeInput dipanggil, yang menetapkan lebar kepada panjang nilai ditambah unit yang dikehendaki (cth., "ch").

3. Logik Sisi Pelayan PHP:

Jika kandungan medan input dijana secara dinamik sisi pelayan menggunakan PHP, lebar boleh ditetapkan menggunakan atribut gaya PHP. Walau bagaimanapun, pendekatan ini memerlukan muat semula halaman dan tidak responsif seperti penyelesaian pihak pelanggan.

Kod Contoh:

<code class="javascript">var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input);

function resizeInput() {
  this.style.width = this.value.length + "ch";
}</code>

<code class="css">input {
  font-size: 1.3em;
  padding: 0.5em;
}</code>

<code class="html"><label>Text
  <input>
</label></code>

Oleh menggunakan unit ch, pendengar acara atau logik sisi pelayan, anda boleh memastikan bahawa medan input anda melaraskan lebarnya secara dinamik agar sesuai dengan kandungannya, memberikan pengalaman yang lebih responsif dan mesra pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Melaraskan Lebar Medan Input Teks Secara Dinamik Berdasarkan Kandungannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!