Berdasarkan jawaban Michael, saya telah membuat versi saya sendiri menggunakan jQuery. Saya pikir ini adalah versi yang lebih bersih / lebih pendek dari sebagian besar jawaban di sini dan tampaknya menyelesaikan pekerjaan.
Saya melakukan hal yang sama seperti kebanyakan orang di sini dengan menggunakan rentang untuk menulis teks input kemudian mendapatkan lebar. Kemudian saya mengatur lebar ketika tindakan keyupdan blurdipanggil.
Ini adalah codepen yang berfungsi . Codepen ini menunjukkan bagaimana ini dapat digunakan dengan beberapa bidang input.
Struktur HTML:
<input type="text" class="plain-field" placeholder="Full Name">
<span style="display: none;"></span>
jQuery:
function resizeInputs($text) {
var text = $text.val().replace(/\s+/g, ' '),
placeholder = $text.attr('placeholder'),
span = $text.next('span');
span.text(placeholder);
var width = span.width();
if(text !== '') {
span.text(text);
var width = span.width();
}
$text.css('width', width + 5);
};
Fungsi di atas mendapatkan nilai input, memangkas ruang ekstra dan mengatur teks ke dalam rentang untuk mendapatkan lebar. Jika tidak ada teks, alih-alih mendapatkan placeholder dan memasukkannya ke dalam rentang. Setelah memasukkan teks ke dalam rentang itu kemudian mengatur lebar input. The + 5pada lebar adalah karena tanpa bahwa input akan memotong sedikit di Edge Browser.
$('.plain-field').each(function() {
var $text = $(this);
resizeInputs($text);
});
$('.plain-field').on('keyup blur', function() {
var $text = $(this);
resizeInputs($text);
});
$('.plain-field').on('blur', function() {
var $text = $(this).val().replace(/\s+/g, ' ');
$(this).val($text);
});
Jika ini bisa diperbaiki tolong beri tahu saya karena ini adalah solusi terbersih yang bisa saya buat.