auto-resizing text input box html

Question

I created an input (type text) box and made it auto-resize quite simply. However, there are a few glitches that I can\'t seem to fix:

1. when I start typing the box s

Answer 1

At first you can use jQuery methods to avoid crossbrowser problem. And scrollWidth returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. So enlarge newWidth only when content width strongly larger than element width.

$("#inputbox").keydown(function(e) {

  var a = $(this).width(), newWidth;


  if(this.scrollWidth - a > 0){
    newWidth = a + 10;
  }else if(e.keyCode==8){
    newWidth = a - 10;
  }
  $(this).css("width", newWidth);

});

If you don't want to make input smaller when pressed backspace - delete else if part of code.