Bagaimanakah Saya Boleh Auto-Skalakan Medan Teks Input untuk Memadankan Lebar Kandungannya?

Cara Auto-skala Medan Teks Input kepada Lebar Nilai

Dalam pembangunan web, selalunya terdapat keperluan untuk melaraskan lebar medan teks input secara dinamik untuk menampung mereka yang sebenar kandungan. Ini boleh meningkatkan pengalaman pengguna dengan sangat baik dengan memastikan medan tidak terlalu lebar dan tidak terlalu sempit.

Menggunakan Atribut saiz

Kaedah mudah untuk mencapai penskalaan automatik adalah dengan menggunakan atribut saiz. Atribut ini menentukan bilangan aksara yang boleh disimpan oleh medan input sebelum dibalut ke baris baharu. Dengan menetapkan atribut saiz secara dinamik kepada panjang nilai yang dimasukkan ke dalam medan input, kami boleh memastikan bahawa lebar medan sepadan dengan kandungan.

function resizeInput() {
  $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
  .keyup(resizeInput)
  .each(resizeInput);

Kod jQuery ini mendengar peristiwa penekanan kekunci dan mengemas kini atribut saiz sewajarnya. Selain itu, ia menetapkan saiz awal agar sepadan dengan nilai awal medan input.

Pertimbangan

Semasa menggunakan atribut saiz berkesan untuk penskalaan automatik, ia mungkin memperkenalkan beberapa padding bergantung kepada penyemak imbas di sebelah kanan medan input. Untuk kesesuaian yang lebih ketat, pertimbangkan untuk menggunakan teknik alternatif seperti mengira saiz piksel teks menggunakan jQuery.

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