How can I embed a textarea inside of another textarea in HTML?

Question

Is there a way to embed a textarea block inside of another textarea block but not render the inside textarea and preserve the outside textarea? I cannot modify the inside textarea. Perhaps there is something better to use for the outside block than a textarea. I need something that will submit its contents at POST. Converting the inside angle brackets to entities is not an option since I want to preserve the html inside the outer textarea.

Non-working Sample Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Test Embedded textareas</title>
</head>
<body>
    <form method="POST">
        <textarea>
            Outside Textarea
            <textarea>Inside Textarea</textarea>
        </textarea>
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

I am creating an html form that is used to edit html code inside a textarea. The textareas inside break my form. — John Scipione, Oct 28 '09 at 17:17
Do you mean you want the text "..." rendered inside of a textarea tag or are you oh dear my head just exploded. — aehiilrs, Oct 28 '09 at 17:37
Yes that is exactly what I mean. I am trying to edit html code inside an html textarea. I am editing html inside a textarea inside of an html form. *head explodes* — John Scipione, Oct 28 '09 at 18:01
by styling? http://thetechawesomeness.ideasmatter.info/rapid-text-area-prototype.html — Oleksii Kyslytsyn, Apr 05 '20 at 20:58

score 26 · Accepted Answer · answered Oct 28 '09 at 17:32

26

Yo dawg.

Seriously, encoding the html is the only option. You can always decode it/do whatever in your server-side code once it gets posted.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Test Embedded textareas</title>
</head>
<body>
    <form method="POST">
        <textarea>
            Outside Textarea
            &lt;textarea&gt;Inside Textarea&lt;/textarea&gt;
        </textarea>
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

answered Oct 28 '09 at 17:32

Chetan S

23,637
2
63
78

14

I heard you like textareas, so I put a textarea in your textarea so you can edit your textarea while you edit your textarea? – Chris Sobolewski Oct 28 '09 at 17:37
You must convert to entities. The only other (ick) solution might be to use JavaScript to convert the brackets and populate the text area, and then reconvert on submit. – Jim Zajkowski Oct 28 '09 at 18:07

score 3 · Answer 2 · answered Jul 24 '13 at 04:44

I've have adequate success wrapping the textarea in a paragraph tag. These one worked for me:

<p style="margin:0;"><textarea rows="1" readonly="readonly" id="summary" name="Summary" ></textarea></p>

<p><textarea name="Note"></textarea></p>

This one didn't work for me:

<p><textarea rows="4" name="In_Honor_Address" class="blockInput"></textarea></p>

Haven't figured out what the difference is between one of these working and the other not, but worth a try.

score 2 · Answer 3 · answered Oct 28 '09 at 17:30

2

No. You can't do it. The only thing valid inside of a textarea is text. It's a textarea. :-)

answered Oct 28 '09 at 17:30

Jesse Weigert

4,714
5
28
37

1

I only want to put text in my textarea, specifically the text , but it won't let me do it! – John Scipione Oct 28 '09 at 17:33
2

No, you're trying to put the text </textarea> in your text area. Excluding those entities are what encoding is for. – eaolson Nov 01 '09 at 16:57

score 1 · Answer 4 · answered Oct 28 '09 at 17:28

1

Why?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Test Embedded textareas</title>
</head>

<style type="text/css">
    #outside { position:absolute; top:0; left:0; z-index:0; width:400px;
        height:400px }
    #inside  { position:absolute; top:100px; left:100px; z-index:1; 
        width:200px; height:200px; }
</style>

<body>

    <div>

        <textarea id="outside" rows="10" cols="80">
            Outside Textarea
        </textarea>

        <textarea id="inside" rows="5" cols="60" readonly>
            Inside Textarea
        </textarea>

    </div>

</body>
</html>

answered Oct 28 '09 at 17:28

Sinan Ünür

116,958
15
196
339

well done but no good, inner textarea must be inside outer block and cannot modify inner textarea – John Scipione Oct 28 '09 at 17:35
because of http://thetechawesomeness.ideasmatter.info/rapid-text-area-prototype.html – Oleksii Kyslytsyn Apr 05 '20 at 20:57

Radium Chris · Answer 5 · 2020-04-23T14:40:41.250

I actually ran into this, as i edit my templates via a textare on my site I want to of course have a textarea on the site....

My solution, when showing the text in the textarea for editing i do a string replace of /textaerea to /textarea placeholder, then before updating the database on submit i simply do the reverse, so either /textarea or /textarea placeholder will be correct and will show everything in the editor instead of closing the editor at the first occurrence of /textarea in the well, "text"

Also showing html entities really takes away from the editing of html, that is the reason i went with the replacement method.

score 1 · Answer 6 · answered Jun 13 '11 at 23:52

1

Heres your solution:

Replace all <'s and >'s with

&lt; and &gt;

answered Jun 13 '11 at 23:52

Jesse

21
1

This is incorrect as per the comments on the question indicate that he actually wants a fully functional `textarea` inside another `textarea` – Yi Jiang Dec 21 '11 at 11:40

score 0 · Answer 7 · answered Oct 28 '09 at 17:02

0

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Test Embedded textareas</title>
</head>
<body>
    <textarea>
        Outside Textarea

    </textarea>
<textarea style="margin-top:-250px; height:250px;">Inside Textarea</textarea>
</body>
</html>

answered Oct 28 '09 at 17:02

CodeJoust

3,760
21
23

didn't work for me in FF 3.5. Also, I forgot to mention that I don't want to modify the inside textarea. I'll edit the question to clarify. – John Scipione Oct 28 '09 at 17:07

score 0 · Answer 8 · answered Oct 28 '09 at 17:30

0

Try a hidden form field.

answered Oct 28 '09 at 17:30

Daniel A. White

187,200
47
362
445

score 0 · Answer 9 · answered Oct 28 '09 at 18:01

0

Have you considered using FckEditor?

answered Oct 28 '09 at 18:01

Paul Sasik

79,492
20
149
189

Yes I have considered using an editor like FckEditor but I don't want a WYSIWYG editor. I just want a plain old text editor inside of an HTML textarea. I am using EditArea Javascript to style the html code though. Check it out here: http://www.cdolivet.com/index.php?page=editArea – John Scipione Oct 28 '09 at 21:16

score 0 · Answer 10 · answered May 21 '13 at 02:43

0

I recently had the same issue and after searching high and low over the net for an answer i resolved it by putting the inside form into a seamless iframe.

answered May 21 '13 at 02:43

mike

11

How can I embed a textarea inside of another textarea in HTML?

10 Answers10

Linked