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

Auto-skala Input Teks untuk Memadankan Nilai Lebar

Sebagai pereka laman web, kami sering menghadapi cabaran untuk mengoptimumkan saiz dan kefungsian input medan untuk memastikan ia menyediakan pengalaman pengguna yang lancar. Satu keperluan biasa ialah melaraskan lebar elemen input teks secara automatik agar sepadan dengan lebar nilai yang terkandung di dalamnya.

Penyelesaian:

Untuk mencapai ini, anda boleh gunakan atribut saiz elemen input, yang menentukan panjang teks yang dimasukkan pengguna dalam aksara. Dengan mengemas kini atribut ini secara dinamik mengikut nilai input, anda boleh melaraskan lebar medan input secara dinamik.

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

$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);

Demonstrasi Langsung:

https:// jsfiddle.net/nrabinowitz/NvynC/

Tambahan Pertimbangan:

Kaedah ini mungkin memperkenalkan sedikit pelapik sebelah kanan, yang boleh berbeza-beza bergantung pada penyemak imbas. Untuk kesesuaian yang lebih tepat, pertimbangkan untuk menggunakan teknik yang mengira saiz piksel teks input menggunakan jQuery.

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