Berikut ialah beberapa pilihan tajuk, dengan mengingati format soalan: Mudah & Langsung: * Bagaimana untuk Melaraskan Lebar Medan Input Secara Dinamik dengan JavaScript? * Mencipta Medan Input Responsif: JavaScrip

Laraskan Secara Dinamik Lebar Medan Input kepada Inputnya

Melaraskan lebar medan input secara dinamik agar sepadan dengan panjang kandungannya boleh meningkatkan pengalaman pengguna dan mengelakkan susun atur yang tidak kemas. Walaupun menetapkan lebar tetap boleh menyebabkan lebihan ruang atau teks terputus, pendekatan dinamik memastikan medan input yang menarik secara visual dan berfungsi.

Malangnya, menetapkan lebar minimum menggunakan sifat lebar min CSS tidak berfungsi untuk medan input. Walau bagaimanapun, penyemak imbas moden menawarkan unit alternatif yang dipanggil "ch" (lebar aksara), yang bebas fon dan sama dengan lebar aksara "0" dalam mana-mana fon.

Untuk mencipta lebar medan input dinamik, kita boleh menggunakan kod JavaScript berikut:

<code class="js">var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input); // Immediately call the function

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

Kod ini mengikat fungsi ubah saiz pada acara input, yang mengemas kini lebar medan input untuk menyamai panjang teksnya dalam unit ch. Selain itu, kami boleh mentakrifkan penggayaan medan input dalam CSS seperti berikut:

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

Ini melengkapkan pelaksanaan lebar medan input boleh laras secara dinamik yang mengembang atau mengecut secara automatik berdasarkan kandungannya.

Atas ialah kandungan terperinci Berikut ialah beberapa pilihan tajuk, dengan mengingati format soalan: Mudah & Langsung: * Bagaimana untuk Melaraskan Lebar Medan Input Secara Dinamik dengan JavaScript? * Mencipta Medan Input Responsif: JavaScrip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!