jQuery - resizing form input based on value's width?

Question

Is it possible to get input\'s value width and resize the input dynamically so the value will fit?

Here\'s an example:

http://jsfiddle.net/bzBdX/2/

Answer 1

All those solutions based on number of characters are quite weak, because each character could be of a different width if it is not a monotype font. I'm solving this problem with creating a div containing value of text input with the same font properties and getting its width as a required one.

Something like this:

function resizeInput() {
    $('body').append('
'+$(this).val()+'
');
    $(this).css('width', $('.new_width').width());
    $('.new_width').remove()
}
$('input')
    // event handler
    .keyup(resizeInput)
    // resize on page load
   .each(resizeInput);