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.