change textbox width based on it's value

UPDATED WITH CODE EXPLANATION:

here you go, the input will always be as long as its characters, whether you type, remove or give it a value before running the script: Demo here

//this is a plugin snippet (or function) to check if the element has //horizontal scrollbar $.fn.hasHorizontalScrollBar = function() { if (this[0].clientWidth < this[0].scrollWidth) { return true } else { return false } } //the end of plugin var originalWidth=$('.txt').width(); //we store the original width //(the width of the input at the page load) in a variable to use it as a //measurement in order to not let the input get smaller than this size //this function checks the width of `.txt` (the input) to see if it has //horizontal scrollbar or not, if it does then expands the width of the input to //the scroll size, else it checks to see if the width is added to the //original width, if so, removes one character (depending on the font size it'll //change - here it is 7 px) function changeWidth(){ if($('.txt').hasHorizontalScrollBar()){ $('.txt').width(document.getElementsByClassName('txt')[0].scrollWidth); } else if(originalWidth<$('.txt').width()){ $('.txt').width($('.txt').width()-7); } }; //end of the function changeWidth(); //run the function at page load, to give the input a size as wide as its // character's length $('.txt').keydown(changeWidth); //assign the function to the keydown event of the input //so whenever a character is added or removed the function will run again