Web Development



How do I create a second textarea which only appears as a "spillover"

By EssayDoctor ·
I'd like to create a textarea such that when one textarea is complete, another identically-sized text area magically appears and floats to the right. The new "spill over" text would now be here.

Another way to explain what I'm looking for is this: Open up MS Word, and view the screen at 25%. Now keep on typing or keep adding text. Notice that when the words start "spilling over", a new sheet of paper (i.e. textarea) appears? This is what I'm interested in doing, but with HTML and/or CSS.

So far, here is my source code. It's very basic for now.

<!doctype html>
<html lang="en">
<meta charset="utf-8" />
<link rel="stylesheet" href="theTextArea.css">
<textarea id="theTextArea" spellcheck='false' cols="185" rows="33" /textarea>
#theTextArea {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
margin: 5px 5px 5px 5px;
background: #ffffff;
border-top: 10px solid black;
border-bottom: 10px solid black;
border-right: 10px solid black;
border-left: 10px solid black;
padding: 10px;
font: 18px tahoma;


This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Answers

Collapse -

How about autoresize?

by gechurch In reply to How do I create a second ...

Do you need to have a second textarea? That could be a bit confusing for users, and can also pose trouble when you submit the form as you have to figure out how many textarea's there are and concatenate them back into a single block of text.

Another approach is to have the textarea height automatically expand as text is typed. I've done this in a previous project and it worked well. I thought it was simple but Googling it now I can only find JQuery solutions like http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js/view. If you invest more than 30 seconds Googling I'm sure you can find more ways of achieving it.

Related Discussions

Related Forums