CODEWITHSUNDEEP
javascriptjquerytextbox
user1165815
user1165815

Reputation: 305

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

Upvotes: 4

Views: 2850

Answers (3)

MattSull
MattSull

Reputation: 5564

have a look at this jquery plugin:

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

Upvotes: -1

Elliot Bonneville
Elliot Bonneville

Reputation: 53311

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

Upvotes: 2

pdizz
pdizz

Reputation: 4240

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.

Upvotes: 2

Related Questions