Display div inside text area

Question

I am looking to display html in a text area. Is it possible to display <div> form form elements inside <textarea> using javascript or jquery?

Answer 1

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

Answer 2

You cannot put a div in textarea, but sometimes you need to do this. The good news is that you can do it the other way using the contenteditable property of the elements. how

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

This Div will behave exactly like Textarea, but you can add whatever you want. And remember when you want to capture data from the inside in jquery

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

Now you can add children like others.

Answer 3

No, this is not possible (it will not display the user interface). If you want to show form fields, why are you using textarea ? You can just use regular html.

Answer 4

Thus, it is not possible to use html tags in <textarea> . You should find a workaround.

Answer 5

I found your question when I was looking for a solution for something completely different, but nonetheless ... Using the wrapper, you can easily place your data over the text area. I'm not sure how much this makes sense, but I believe that 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> 

Answer 6

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

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

But if you try to dynamically change the innerhtml of this div, then remember that you have to independently control the location of the caret.