javascript - 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
});

Answer 1

我相信 Snippi 使用了类似的东西。http://www.jacklmoore.com/autosize/

用法

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

手动触发

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