Здесь вы можете попробовать что-то вроде этого
EDIT: ПЕРЕСМОТРЕННЫЙ ПРИМЕР (добавлено одно новое решение) http://jsfiddle.net/jszjz/10/
Обоснование кода
var jqThis = $('#adjinput'), //object of the input field in jQuery
fontSize = parseInt( jqThis.css('font-size') ) / 2, //its font-size
//its min Width (the box won't become smaller than this
minWidth= parseInt( jqThis.css('min-width') ),
//its maxWidth (the box won't become bigger than this)
maxWidth= parseInt( jqThis.css('max-width') );
jqThis.bind('keydown', function(e){ //on key down
var newVal = (this.value.length * fontSize); //compute the new width
if( newVal > minWidth && newVal <= maxWidth ) //check to see if it is within Min and Max
this.style.width = newVal + 'px'; //update the value.
});
и css также довольно просто
#adjinput{
max-width:200px !important;
width:40px;
min-width:40px;
font-size:11px;
}
EDIT: Другое решение - использовать тип пользователя, что он хочет, и размытие (фокус ), возьмите строку (в том же размере шрифта) поместите ее в div - подсчет ширины div, а затем с приятным анимацией с эффектом охлаждения, обновите ширину полей ввода. Единственный недостаток заключается в том, что поле ввода останется «маленьким», пока пользователь набирает. Или вы можете добавить тайм-аут:) вы также можете проверить такое решение на скрипке!