Auto-Paginating Textarea

This is a solution for a question asked on stackoverflow: http://stackoverflow.com/questions/6042115/

by majidf

HTML

<textarea class="paginate"></textarea>

<!-- this is for info only -->
<div style="position: absolute; top: 25px; right: 5px; width: 140px;">A solution for<br><a href="http://stackoverflow.com/questions/6042115/">this question</a>.</div>

CSS

.paginate { height: 60px; width: 200px; display: block;}

JavaScript

$('textarea.paginate').live('keydown', function(event) {

    // scrollbars apreared
    if (this.clientHeight < this.scrollHeight) {

        var words = $(this).val().split(' ');
        var last_word = words.pop();
        var reduced = words.join(' ');
        $(this).val(reduced);
        $(this).css('height', '65px');

        $(this).after('<textarea class="paginate"></textarea>');
        $(this).next().focus().val(last_word);

    }

});