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

You can try this.

We put the content in a hidden span & then adjust width according to span scrollWidth.

function Expander() {

    this.start = function () {

        $('#inputbox').on('keydown',function(e) {

            $("#hidden_span").html("");
            $("#hidden_span").append("
"+$(this).val()+"
");

            var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth;

            if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){
                $(this).css("width",hidden_span_scroll_width);
            }

        });

    }

}


$(function() {
    window.app = new Expander();
    window.app.start();
});

input {
    margin-left:3em;
    min-width:100px;
    max-width:600px;
}

#hidden_span{
    position:absolute;
    top:0px;
    left:0px;
    visibility:hidden;
    width:10px;
    white-space:nowrap;
    overflow:hidden;
}