jquery - Make an input adapt to its text -

i have tried different ways make input adapt text. closer jquery is: $("div").attr("size", $("div").val().length );

i think works attribute size, not seem measure text. seems size works measure numbers not text:

<input type="text" id="first" name="first" size="11" value="this has 11"> <br> <input type="text" id="second" name="second" size="11" value="12345678901"> <br> <input type="text" id="third" name="third" size="22" value="this has 22 characters"> 

so, when use size jquery:

$("#jq").attr("size", $("#jq").val().length ); 

html:

<input type="text" id="jq" name="jq" value="text, text, text"> 

here example play: http://jsfiddle.net/auk7g40m/

is there better way make input adapt text?

unless you're using monotype font characters have same width, easiest way width of string append element, , width of element, this

$("#jq").css('width', function() {     var el = $('<span />', {         text : this.value,          css  : {left: -9999, position: 'relative'}     }).appendto('body');     var w = el.css('width');     el.remove();     return w; }); 

note setting height , width of element doesn't unless element has position , not static.

fiddle

to make width follow keys pressed, you'd wrap in event handler

fiddle