CODEWITHSUNDEEP
javascriptjqueryhtml
Michael Insalaco
Michael Insalaco

Reputation: 871

display div inside text area

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?

Upvotes: 12

Views: 28574

Answers (6)

Deepika Chhabra
Deepika Chhabra

Reputation: 11

You can achieve this by using div with contenteditable attribute, instead of a textarea, like this:

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

But if you try to change the innerhtml of this div dynamically then remember, you'll have to manage caret location by yourself.

Upvotes: 1

Chris S.
Chris S.

Reputation: 1257

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. 

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

Upvotes: 0

Abdul Jabbar
Abdul Jabbar

Reputation: 5931

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 contenteditable property of elements. Like

 <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

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

Now you can append childs just like others.

Upvotes: 26

shadyabhi
shadyabhi

Reputation: 17234

As such, it's not possible to use html tags in a <textarea>. You have to find a workaround.

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

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.

Upvotes: 0

JaredMcAteer
JaredMcAteer

Reputation: 22536

You cannot place HTML elements inside a text area, only text content.

Upvotes: 14

Related Questions