Text box size should grow when typing

Question

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 for this effect? If not how can this be achieved.?

Answer 1

have a look at this jquery plugin:

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

Answer 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.

Answer 3

$("#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).