W oparciu o odpowiedź Michaela stworzyłem własną wersję tego przy użyciu jQuery. Myślę, że jest to czystsza / krótsza wersja większości odpowiedzi tutaj i wydaje się, że wykonuje swoje zadanie.
Robię to samo, co większość ludzi tutaj, używając rozpiętości, aby wpisać tekst wejściowy, a następnie uzyskać szerokość. Następnie ustawiam szerokość, gdy akcje keyup
iblur
wywoływania .
Oto działający kod . Ten kod pokazuje, jak można go używać z wieloma polami wejściowymi.
Struktura 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);
};
Powyższa funkcja pobiera wartość wejściową, przycina dodatkowe spacje i ustawia tekst w zakresie, aby uzyskać szerokość. Jeśli nie ma tekstu, zamiast tego pobiera symbol zastępczy i zamiast tego wprowadza go do zakresu. Po wprowadzeniu tekstu do zakresu ustawia szerokość wejścia. + 5
Szerokości dlatego bez że wejście zostanie odcięty odrobinę w przeglądarce krawędzi.
$('.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);
});
Jeśli można to poprawić, daj mi znać, ponieważ jest to najczystsze rozwiązanie, jakie mogłem wymyślić.