dynamically increase input type text textbox width according to the characters entering into it

I have a textbox where the user can enter any number of characters, But I want its width to be increased dynamically with respect to the number of characters entered into it.

I have done a workaround shown below and it works partially, it will increase the width dynamically but not so precisely and will hide the first entered characters after a while because of my poor logic applied in it. I've just given a wild cutoff of 17 characters count to start the increment.

It should start the width increment only if the character count reaches the end of textbox.

UPDATE:

I am looking to make visible all the characters entered in the field, whereas in default the text box hides the leftmost characters.

FIDDLE DEMO

HTML

<input type="text" id="txtbox" />

SCRIPT

$('#txtbox').keypress(function() {
    var txtWidth = $(this).width();
    var cs = $(this).val().length;

    if(cs>17){
       $(this).width(txtWidth+5);
    }
});

Solution

I have tried this code and it works fine.

<html>
<head>
  <script type="text/javascript">
     function Expand(obj){
      if (!obj.savesize) obj.savesize=obj.size;
      obj.size=Math.max(obj.savesize,obj.value.length);
     }
  </script>
  </head>
  <body>
     <form>
       <input  type="text" size="5" style="font-family:Courier;" onkeyup="Expand(this);">
     </form>
  </body>
</html>

Be sure to use mono space fonts in text box, otherwise the size attr. and number of characters won't match