Javascript/Jquery technique: paginate fixed-size textarea with overflow:hidden

I have a user input <textarea id='input_text'> element, with the following CSS:

#input_text{ 
    height:200px; 
    overflow:hidden;  
    border-width:0;
    background-color:transparent;
}

The main reason for 'overflow:hidden' is to avoid the ugly scroll bar that pops up when the textarea is full. Instead, I would like pagination to occur when the textarea becomes full. What would be the best way to implement this? I'm thinking javascript/jquery, but not sure exactly how.

Additional notes: When end of textarea is reached, pagination occurs automatically (new page), while the page switches back (old page) if the user backspaces, or clicks on a link to it (back to page 1).

Not expecting f开发者_开发百科ull solution, but some useful hints would come in handy for me (possibly future coders as well). Thanks.

I'd do something like:

• On the keyup event check to see if scrollHeight is greater than the height of the textarea.
• If it is remove the text that's in the text area and store it in an array. The values of this array will make up your "pages".
• You then need to build some UI to navigate backward and forward through the pages.

The 'fun' part of this solution would be how to re-flow the pages when something is added or deleted in the middle.

Pagination of a textarea is a horrible idea. If my comment is too long I shouldn't have to go through multiple pages to read it through.

I'd go with http://plugins.jquery.com/project/TextAreaResizer, the same plugin that StackOverFlow uses on its text areas. It allows the user to expand the textarea as he or she pleases.

The jQuery.elastic plugin will do what you are looking for. It stretches the textarea vertically as more texts gets entered into it.