Bagaimana untuk Mengubah Saiz Medan Input Secara Dinamik Berdasarkan Panjang Kandungan?

Melaraskan Lebar Medan Input kepada Inputnya

Masalah: Mengubah suai lebar medan input untuk mematuhi kandungannya menggunakan HTML, JavaScript, PHP atau CSS terbukti mencabar. Atribut lebar min tidak berkesan dan lebar tetap boleh menyebabkan kekacauan visual.

Penyelesaian:

Pertimbangkan untuk menggunakan unit ch CSS, yang merupakan ukuran bebas fon sepadan dengan lebar aksara sifar. Dengan mengikat fungsi ubah saiz pada acara input, lebar medan input boleh dilaraskan secara dinamik:

<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>

Untuk melengkapkan ini, gunakan gaya CSS berikut:

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

Ini memastikan bahawa medan input menyesuaikan lebarnya dengan panjang kandungannya sambil mengekalkan padding dan saiz fon yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Medan Input Secara Dinamik Berdasarkan Panjang Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!