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>
10 answers
solution1
25 ACCPTED 2009-10-28 17:32:31
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
<textarea>Inside Textarea</textarea>
</textarea>
<input type="submit" value="Submit" />
</form>
</body>
</html>
solution2
3 2013-07-24 04:44:20
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.
solution3
2 2009-10-28 17:30:53
No. You can't do it. The only thing valid inside of a textarea is text. It's a textarea. :-)
solution4
1 2009-10-28 17:02:35
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>
solution5
1 2009-10-28 17:28:24
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>
solution6
1 2011-06-13 23:52:08
Heres your solution:
Replace all <'s and >'s with
< and >
solution7
0 2009-10-28 17:30:14
尝试隐藏表单域。
solution8
0 2009-10-28 18:01:38
你考虑过使用FckEditor吗？
solution9
0 2013-05-21 02:43:47
我最近遇到了同样的问题，在网上搜索了高低的答案后，我通过将内部表单放入无缝 iframe 中解决了这个问题。
solution10
0 2020-04-06 22:05:58
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.