在文本区域内显示div

Question

我想在文本区域中显示html代码，是否可能使用javascript或jquery在标签内展示包含表单元素的<div>标签？

- Michael Insalaco

---

你只能在textarea中放置HTML内容，但无法像容器内的元素一样显示它。 - Samich

你可以看一下一些现有的开源所见即所得编辑器。除非你的项目是要构建一个所见即所得编辑器，否则我强烈建议使用这些，因为完善和维护一个所见即所得编辑器需要大量的工作。它通常由各种技巧组成，因此跨浏览器优化很麻烦。个人而言，我使用www.ckeditor.com。 - Jens

如果你需要做这样的事情，你需要将文本区域的背景设置为透明，并绝对定位你想要放在文本区域后面的内容。 - Undefined

你为什么认为你需要这样做，你想要实现什么目标？ - MattP

这个回答解决了你的问题吗？在textarea中呈现HTML - ATP

Answer 1

您不能将div放入textarea中，但有时您需要这样做。好消息是，您可以通过使用元素的contenteditable属性以其他方式实现。比如

 <div contenteditable="true" style="min-height:50px; width:300px;" id="txtDiv">
 </div>

这个

元素会像一样运作，但您可以附加任何内容。还记得当您想在jQuery中获取它内部的数据时</p><pre class="guess-Ini"><code> var ContentofDiv = $('#txtDiv').html(); </code></pre><p>现在您可以像其他人一样添加子元素。</p>

- Airy

Answer 2

您无法在文本区域内放置HTML元素，只能放置文本内容。

- JaredMcAteer

---

@Juicy Scripter 不错的计数器 :-) - Exception

only text content 只涵盖了这一部分。 - JaredMcAteer

部分正确，你可以使用JavaScript/jQuery实现。请参见下面的@Abdul Jabbar Dumrai。简单来说，它不会被解释为HTML，但作为表单的隐藏文本区域仍然很有用。 - Mike Casan Ballester

我的回答有哪些部分是正确的？问题是将HTML放入<textarea>元素中并像HTML一样呈现它。阿卜杜勒的答案是将html放入<div>中并使其可编辑。问题缺乏澄清，即他们最终想要实现什么，只是询问他们所问的是否可能，而这是不可能的。 - JaredMcAteer

Answer 3

你可以通过使用带有contenteditable属性的div来实现这一点，而不是使用textarea，就像这样：

<div contenteditable="true">
  <div>inner div</div>
</div>    

但是，如果您尝试动态更改此div的innerhtml，则需要记住，您将不得不自己管理插入符位置。

- Deepika Chhabra

Answer 4

我在寻找另一件事的解决方案时发现了你的问题，但是...通过包装器，您可以轻松地将输入放置在文本区域上方。我不确定这是否有多大意义，但我相信它无论如何都回答了你的问题。

.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>

- Chris S.

Answer 5

不，这是不可能的（它不会呈现UI）。如果您想显示表单字段，为什么要使用？您可以只使用普通的HTML。

- ShankarSangoli

Answer 6

因此，在 <textarea> 中无法使用 HTML 标签。您必须找到一种解决方法。

- shadyabhi