Question

我希望在文本区域中显示html。是否可以使用javascript或jquery在<div>内显示包含<textarea>表单元素？

Answer 1

你不能把div放在textarea中，但有时你需要这样做。好消息是，您可以使用元素的 contenteditable 属性以其他方式执行此操作。像

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

这个Div的行为与Textarea完全相同，但你可以附加任何你想要的东西。并记住当你想在jquery

中从里面获取数据时

 var ContentofDiv = $('#txtDiv').html();

现在，您可以像其他人一样追加孩子。

Answer 2

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

Answer 3

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

Answer 4

因此，无法在<textarea>中使用html标记。你必须找到一种解决方法。

Answer 5

我在寻找其他解决方案时发现了您的问题，但是...使用包装器，您可以轻松地将输入内容放在文本区域上。我不确定这能带来多大的意义，但我相信它仍然可以回答您的问题。

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

Answer 6

您可以通过使用具有contenteditable属性的div（而不是文本区域）来实现此目的，

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

但是，如果您尝试动态更改此div的innerhtml，请记住，您必须自己管理插入符号的位置。

在文本区域内显示div

6 个答案: