Bagaimanakah Saya Boleh Mengubah Saiz Medan Input Secara Dinamik untuk Memadankan Panjang Kandungannya?

Mengubah saiz Medan Input untuk Memadankan Panjang Input

Melaraskan lebar medan input agar sepadan dengan inputnya dengan tepat boleh menjadi tugas yang sukar. Walaupun pendekatan tradisional untuk menetapkan lebar minimum menggunakan lebar min mungkin tidak selalu menghasilkan hasil yang diingini, terdapat penyelesaian alternatif untuk mengatasi cabaran ini.

Unit CSS: ch

Pelayar moden menyokong unit CSS "ch," yang mewakili lebar aksara "0" (sifar) dalam fon semasa. Unit ini bebas fon, menyediakan cara yang boleh dipercayai untuk menentukan lebar minimum medan input.

Fungsi Ubah Saiz JavaScript

Untuk melaraskan lebar secara dinamik berdasarkan input panjang, anda boleh menggunakan fungsi JavaScript berikut:

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

Fungsi ini mendapatkan semula nilai input dan menetapkan lebar menggunakan unit "ch", memastikan medan mengembang atau mengecut untuk menampung input.

Mengikat pada Acara Input

Untuk mencetuskan fungsi ubah saiz, ikatkannya ke acara "input":

var input = document.querySelector('input');
input.addEventListener('input', resizeInput);

Dengan menggunakan teknik ini, anda boleh membuat input medan yang melaraskan lebarnya dengan lancar berdasarkan input, memberikan pengalaman yang lebih mesra pengguna dan dinamik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz Medan Input Secara Dinamik untuk Memadankan Panjang Kandungannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!