Bagaimanakah Saya Boleh Auto-Skalakan Lebar Medan Input untuk Memadankan Kandungannya dalam JavaScript dan jQuery?

Auto-menskalakan Lebar Medan Input untuk Memadankan Nilai Input

Dalam bidang pembangunan web, selalunya wajar untuk melaraskan lebar secara dinamik medan input untuk memadankan panjang kandungannya. Ini memastikan bahawa medan hanya menduduki ruang yang diperlukan pada skrin. Begini cara untuk mencapainya menggunakan JavaScript dan jQuery:

Penyelesaian:

1. Tetapkan Lebar Permulaan kepada Auto:

Mula-mula, nyatakan sifat lebar medan input sebagai auto. Ini membolehkan medan berkembang secara semula jadi berdasarkan kandungannya.

input {
  display: block;
  margin: 20px;
  width: auto;
}

2. Kemas kini Lebar pada Ketukan Kekunci:

Seterusnya, gunakan jQuery untuk mengemas kini atribut saiz medan input setiap kali kekunci ditekan. Atribut ini menentukan bilangan aksara yang boleh disimpan oleh medan. Dengan menetapkannya kepada panjang kandungan, medan akan berskala secara automatik kepada lebar yang sesuai.

$('input[type="text"]').keyup(function() {
  $(this).attr('size', $(this).val().length);
});

3. Ubah saiz pada Muatan Halaman:

Selepas menyediakan pengendali acara, cetuskan gelagat mengubah saiz secara manual setelah halaman dimuatkan. Ini memastikan bahawa medan bersaiz betul pada paparan awal.

$('input[type="text"]').each(function() {
  $(this).attr('size', $(this).val().length);
});

Contoh:

Pertimbangkan HTML berikut:

<input type="text" value="I've had enough of these damn snakes, on this damn plane!" />
<input type="text" value="me too" />

Apabila halaman dimuatkan, kedua-dua medan input akan dilaraskan lebarnya untuk menampung teksnya kandungan.

Nota:

Walaupun pendekatan ini berkesan menskalakan lebar medan input, ia mungkin menyebabkan beberapa padding ditambahkan ke sebelah kanan. Untuk mencapai kesesuaian yang lebih ketat, anda boleh mempertimbangkan untuk menggunakan teknik seperti mengukur saiz piksel teks dan melaraskan sifat lebar dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Auto-Skalakan Lebar Medan Input untuk Memadankan Kandungannya dalam JavaScript dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!