Tutaj jest już wiele dobrych odpowiedzi. Dla zabawy wdrożyłem to rozwiązanie poniżej, opierając się na innych odpowiedziach i własnych pomysłach.
<input class="adjust">
Element wejściowy jest dostosowywany z dokładnością do pikseli i można zdefiniować dodatkowe przesunięcie.
function adjust(elements, offset, min, max) {
offset = offset || 0;
min = min || 0;
max = max || Infinity;
elements.each(function() {
var element = $(this);
var id = btoa(Math.floor(Math.random() * Math.pow(2, 64)));
var tag = $('<span id="' + id + '">' + element.val() + '</span>').css({
'display': 'none',
'font-family': element.css('font-family'),
'font-size': element.css('font-size'),
}).appendTo('body');
function update() {
setTimeout(function() {
tag.html(element.val().replace(/ /g, ' '));
var size = Math.max(min, Math.min(max, tag.width() + offset));
if (size < max)
element.scrollLeft(0);
element.width(size);
}, 0);
};
update();
element.keydown(update);
});
}
adjust($('.adjust'), 10, 100, 500);
Dostosowanie jest wygładzane za pomocą przejścia CSS.
.adjust {
transition: width .15s;
}
Oto skrzypce . Mam nadzieję, że pomoże to innym szukającym czystego rozwiązania.