Increase height of textarea when last line reached

Question

I am trying to create a text area similar to the one at http://snippi.com/. If you type enough that you reach the bottom line (hit enter a lot) then it increases the height of the text area by one 'line-height' (21px on my site).

I believe the best way to do this would be with jQuery but I'm not really sure where to start. Could anyone help? It would be really awesome as well if when you delete a line it 'shrinks' back by one 'line-height' as on http://snippi.com/.

I have had a shot at it and the code is over here on jsFiddle. This is what I have started with:

$('#text').focus(function () {
    // Do something here
});

Duplicate (of many...), but specifically: http://stackoverflow.com/questions/7745741/auto-expanding-textarea and http://stackoverflow.com/questions/2948230/auto-expand-a-textarea-using-jquery. Please read. If they *don't* answer your question/solve your problem, rephrase your question to explain how they fail for you. — David Thomas, Aug 11 '13 at 11:54

Ali Gajani · Accepted Answer · 2013-08-11T12:11:43.700

1

I believe Snippi uses something like this. http://www.jacklmoore.com/autosize/

Usage

// Example:
$(document).ready(function(){
    $('textarea').autosize();   
});

Manual Triggering

$('#example').val('New Text!').trigger('autosize.resize');

edited Aug 11 '13 at 12:11

answered Aug 11 '13 at 12:03

Ali Gajani

14,762
12
59
100

I literally have just finished adding `jquery.autosize` to my project after coming across it using the comment above. It's exactly what I wanted. – Benedict Lewis Aug 11 '13 at 12:05
1

Awesome, did you update the JSFiddle, we'd like to see how you implemented it. Would be helpful for other users as well for learning purposes. – Ali Gajani Aug 11 '13 at 12:05
1

@AliGajani Link may die. Post necessary code here. – Bhojendra Rauniyar Aug 11 '13 at 12:08

Increase height of textarea when last line reached

1 Answers1