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

Mary-Kate Olsen
Lepaskan: 2024-11-01 11:00:29
asal
802 orang telah melayarinya

 How to Dynamically Adjust the Width of a Text Input Field Based on Its Content?

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>
Salin selepas log masuk
<code class="css">input {
  font-size: 1.3em;
  padding: 0.5em;
}</code>
Salin selepas log masuk
<code class="html"><label>Text
  <input>
</label></code>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!