Bagaimana untuk Melaraskan Lebar Medan Input Secara Dinamik Berdasarkan Kandungan?

Melaraskan Lebar Medan Input Secara Dinamik kepada Kandungannya

Manakala kod CSS yang disediakan style="min-width:1px;" mungkin tidak berfungsi dengan berkesan untuk medan input, wujud penyelesaian alternatif yang melaraskan lebar medan input secara dinamik berdasarkan kandungannya. Pendekatan ini melibatkan penggunaan unit CSS 'ch' (aksara), yang mewakili lebar aksara '0' (sifar) dalam fon yang dipilih.

Untuk melaksanakan penyelesaian ini, JavaScript boleh digunakan untuk mengendalikan peristiwa 'input', yang mencetuskan bila-bila masa pengguna menaip dalam medan input. Dalam pengendali acara ini, tindakan berikut boleh dilakukan:

<code class="javascript">var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function

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

Selain itu, untuk memperhalusi penampilan medan input, CSS boleh digunakan seperti berikut:

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

Bersama-sama, pengubahsuaian ini akan membolehkan medan input melaraskan lebarnya dengan lancar untuk menampung kandungannya sambil mengekalkan kebolehbacaan. Unit 'ch' memastikan bahawa lebar adalah berkadar dengan aksara yang dimasukkan, menghasilkan medan input responsif secara dinamik.

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