title: dynamically increase input type text textbox width according to the characters entering into it
body: <p>I have a <code>textbox</code> where the user can enter any number of characters, But I want its <strong>width to be increased dynamically with respect to the number of characters entered into it</strong>.</p>
  
  <p>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. </p>
  
  <p><strong>It should start the width increment only if the character count reaches the end of textbox.</strong></p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p><strong>I am looking to make visible all the characters entered in the field, whereas in default the text box hides the leftmost characters.</strong></p>
  
  <p><strong><a href="http://jsfiddle.net/5QcQK/2/" rel="nofollow noreferrer">FIDDLE DEMO</a></strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="text" id="txtbox" /&gt;
  </code></pre>
  
  <p><strong>SCRIPT</strong></p>
  
  <pre><code>$('#txtbox').keypress(function() {
      var txtWidth = $(this).width();
      var cs = $(this).val().length;
  
      if(cs&gt;17){
         $(this).width(txtWidth+5);
      }
  });
  </code></pre>