Auto-Paginating Textarea
This is a solution for a question asked on stackoverflow:
http://stackoverflow.com/questions/6042115/
HTML
<textarea class="paginate"></textarea>
CSS
.paginate {
height: 60px;
width: 200px;
display: block;
overflow-y: hidden;
word-wrap: break-word;
}
JavaScript
$('.paginate').live('keyup', function(event)
{
var text = $(this).val();
var lines = text.split(/\r|\r\n|\n/);
var count = lines.length;
console.log(count); // Outputs 4
var prev = $(this).prev();
if ($(this).val().length == 0)
{
if ($(this).siblings().length > 0)
{
$(prev).focus();
$(this).remove();
}
}
// scrollbars apreared
if (this.clientHeight < this.scrollHeight) {
$(this).css('height', '65px');
$(this).after('<textarea class="paginate"></textarea>');
$(this).next().focus();
}
});