Bagaimana untuk Melaraskan Lebar Medan Input Secara Dinamik Berdasarkan Kandungannya?

Melaraskan Lebar Medan Input kepada Kandungannya

Apabila cuba menetapkan lebar minimum medan input menggunakan "lebar min" tidak' t berfungsi seperti yang diharapkan, penyelesaian alternatif diperlukan. Satu penyelesaian sedemikian ialah menggunakan unit CSS 'ch', yang mewakili lebar aksara "0" dalam fon tertentu.

Dalam penyemak imbas moden, CSS berikut boleh digunakan:

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

Untuk melaraskan lebar medan input berdasarkan kandungannya, fungsi JavaScript boleh diikat pada acara "input":

<code class="javascript">var input = document.querySelector('input');
input.addEventListener('input', resizeInput);

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

Fungsi JavaScript ini menukar lebar medan input untuk dipadankan panjang nilainya ditambah 1 'ch' untuk menampung padding. Pendengar acara memastikan bahawa lebar dikemas kini apabila nilai input berubah.

Nota: Pendekatan ini mungkin tidak sesuai untuk semua senario disebabkan isu keserasian penyemak imbas dengan unit 'ch'. Sentiasa uji kod anda merentas penyemak imbas dan sistem pengendalian yang berbeza untuk memastikan kefungsian yang diingini.

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