4

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

user1165815
  • 305
  • 2
  • 6
  • 21
  • 2
    What have you tried? How about starting with Google..? Result #3 looks useful. https://www.google.com/webhp?sourceid=chrome-instant&ie=UTF-8&ion=1#hl=en&sclient=psy-ab&q=textarea%20grow%20with%20text&oq=&aq=&aqi=&aql=&gs_nf=&gs_l=&pbx=1&fp=a366a72422fd9740&ion=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.,cf.osb – Dutchie432 Apr 23 '12 at 18:02
  • 3
    You need to accept some answers first – qwertymk Apr 23 '12 at 18:02
  • http://stackoverflow.com/questions/7745741/auto-expanding-textarea – Blazemonger Apr 23 '12 at 18:03
  • I mam ready to accept but for that my reputation should be 15 – user1165815 Apr 23 '12 at 18:03
  • You only need 1 rep to click on the checkmark, which is accept. I've given you 5 rep so you can also upvote (up arrow) some of those answers :) – Heitor Chang Apr 23 '12 at 18:10
  • thank you I have up voted the answers. I will mark them answered. – user1165815 Apr 23 '12 at 18:11

3 Answers3

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

Elliot Bonneville
  • 51,872
  • 23
  • 96
  • 123
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.

pdizz
  • 4,100
  • 4
  • 28
  • 42
  • Unfortunately, this answer won't let the user type, as the size will automatically equal what's already in the text box, meaning the user won't be able to put any new text in. Also, there's no need to pass in an object into the `.attr()` function if you're only modifying one variable. Just use `$(this).attr("size", $(this).val().length);` – Elliot Bonneville Apr 23 '12 at 18:15
  • Assuming the textbox has a default/starting size it works fine. – pdizz Apr 23 '12 at 18:17
  • Oops, you're right, I forgot that length is actually one greater than the amount of characters in the string, because the characters are 0 indexed. This works fine. :D – Elliot Bonneville Apr 23 '12 at 18:20
-1

have a look at this jquery plugin:

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

MattSull
  • 5,514
  • 5
  • 46
  • 68