Здесь уже есть много хороших ответов. Ради интереса я реализовал это решение ниже, основываясь на других ответах и моих собственных идеях.
<input class="adjust">
Элемент ввода настраивается с точностью до пикселя, и может быть определено дополнительное смещение.
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);
Регулировка сглаживается переходом CSS.
.adjust {
transition: width .15s;
}
Вот скрипка . Я надеюсь, что это поможет другим, ищущим чистое решение.