Text Box Size Should Grow When Typing

I am looking for a effect in the text box. Initially the size of the text box will be small and when type in, the text box should grow bigger. Is there any jquery plugin available

Solution 1:

$("#mytextbox").keyup(function() {
    $(this).attr("maxLength", $(this).attr("maxLength") + 1);
    $(this).attr("size", $(this).attr("size") + 1);
});

Be aware that if the user presses a function key with the textbox focused, the size will increase regardless. You should instead monitor the textbox for changes in its value:

$("#mytextbox").keyup(function() {
    $(this).attr("size", $(this).val().length + 1);
});

Note that the second method will also support copy/pasting into the input field, whereas the first one will not, although you'll have to make sure the user has enough room to copy something in (right now, the size is set to +1 of the current value, meaning the user can only input one character at a time before the size is increased).

Solution 2:

var $text = $('myselector')
$text.keyup(function() {
    $(this).attr({size : $(this).val().length});
});

This takes the size directly from the string length of whatever is input in the textbox.

Solution 3:

have a look at this jquery plugin:

http://www.unwrongest.com/projects/elastic/