javascript 在文本区域内显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8973451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display div inside text area
提问by Michael Insalaco
I'm looking to display html in a text area. Is it possible to display a <div>containing form elements inside a <textarea>using javascript or jquery?
我希望在文本区域中显示 html。是否可以<div>在<textarea>使用 javascript 或 jquery 的内部显示包含表单元素？
回答by Airy
You cannot put div in textarea but sometimes you need to do so. Good news is that you can do it in other way by using contenteditableproperty of elements. Like
您不能将 div 放在 textarea 中，但有时您需要这样做。好消息是您可以通过使用元素的contenteditable属性以其他方式做到这一点。喜欢
<div contenteditable="true" style="min-height:50px; width:300px;" id="txtDiv">
</div>
This Div will behave exactly like a Textarea but you can append anything you want. And remember when you want to grab data from inside it in jquery
该 Div 的行为与 Textarea 完全相同，但您可以附加任何您想要的内容。记住什么时候你想在 jquery 中从里面获取数据
var ContentofDiv = $('#txtDiv').html();
Now you can append childs just like others.
现在您可以像其他人一样附加孩子。
回答by JaredMcAteer
You cannot place HTML elements inside a text area, only text content.
您不能将 HTML 元素放置在文本区域内，只能放置文本内容。
回答by ShankarSangoli
No, it is not possible(it will not render the UI). If you want to show form fields why are you using textarea? You can just use normal html.
不，这是不可能的（它不会呈现 UI）。如果要显示表单字段，为什么要使用textarea? 你可以只使用普通的 html。
回答by Abhijeet Rastogi
As such, it's not possible to use html tags in a <textarea>. You have to find a workaround.
因此，不可能在 .html 文件中使用 html 标签<textarea>。您必须找到解决方法。
回答by Chris S.
I found your question when I was looking for a solution for something entirely else but however... With a wrapper you can easily place your input over your textarea. I'm not sure how much sense that makes but I believe it answers your question anyway.
我在寻找完全不同的解决方案时发现了您的问题，但是……使用包装器，您可以轻松地将输入放在 textarea 上。我不确定这有多大意义，但我相信它无论如何都能回答你的问题。
.wrapper {
position:relative;
width:200px;
height:50px;
}
.wrapper textarea {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
display:inline-block;
resize: none;
z-index:1;
}
.wrapper input[name="test2"] {
position:absolute;
top:0;
left:50px;
z-index:2;
}<div class="wrapper">
<textarea name="test1">This is</textarea>
<input type="text" name="test2" placeholder="(Sparta?)">
</div>回答by Deepika Chhabra
You can achieve this by using div with contenteditable attribute, instead of a textarea, like this:
您可以通过使用带有 contenteditable 属性的 div 而不是 textarea 来实现这一点，如下所示：
<div contenteditable="true">
</div>
But if you try to change the innerhtml of this div dynamically then remember, you'll have to manage caret location by yourself.
但是，如果您尝试动态更改此 div 的innerhtml，请记住，您必须自己管理插入符号位置。
