dynamicznie zwiększaj szerokość pola tekstowego typu wejściowego w zależności od wprowadzanych do niego znaków

mamtextbox gdzie użytkownik może wprowadzić dowolną liczbę znaków, ale chcę goszerokość zwiększana dynamicznie w odniesieniu do liczby wprowadzonych znaków.

Zrobiłem obejście pokazane poniżej i działa częściowo, dynamicznie zwiększy szerokość, ale nie tak precyzyjnie i ukryje pierwsze wprowadzone znaki po chwili z powodu mojej słabej logiki. Właśnie zacząłem odliczać 17 znaków, aby rozpocząć przyrost.

Powinny rozpoczynać przyrost szerokości tylko wtedy, gdy liczba znaków osiągnie koniec pola tekstowego.

AKTUALIZACJA:

Chcę pokazać wszystkie znaki wpisane w polu, podczas gdy w domyślnym polu tekstowym ukrywa się lewy znak.

FIDDLE DEMO

HTML

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

SCENARIUSZ

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

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

questionAnswers(4)

yourAnswerToTheQuestion