10

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?

Michael Insalaco
  • 851
  • 2
  • 9
  • 12
  • You can put only html content inside of `textarea` but you cant display it like an element inside of container. – Samich Jan 23 '12 at 14:50
  • You could take a look at some of the existing open source WYSIWYG editors. Unless your project is to build a WYSIWYG I highly recommend using those, since it is a lot of work to perfect and maintain a WYSIWYG. It's often made up of hacks, so cross-browser optimization is a b**ch. Personally I use www.ckeditor.com. – Jens Jan 23 '12 at 14:51
  • If you had to do something like this you would be looking at making the textarea background transparent and absolutely positioning the content you want behind the textarea. – Undefined Jan 23 '12 at 14:52
  • Why do you think you need to do this, what is it you want to achieve? – MattP Jan 23 '12 at 14:56
  • Does this answer your question? [Rendering HTML inside textarea](https://stackoverflow.com/questions/4705848/rendering-html-inside-textarea) – ATP Aug 04 '22 at 10:22

6 Answers6

25

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.

Airy
  • 5,484
  • 7
  • 53
  • 78
14

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

JaredMcAteer
  • 21,688
  • 5
  • 49
  • 65
  • @Juicy Scripter Nice counter :-) – Exception Jan 23 '12 at 14:51
  • `only text content` covers that part. – JaredMcAteer Jan 23 '12 at 14:52
  • PARTIALLY true, you can with javascript/jquery. See @Abdul Jabbar Dumrai below. Simply, it will not be interpreted as html, but it can still be useful as hidden textarea for forms – Mike Casan Ballester Jun 05 '19 at 11:24
  • What is partially true about my answer? The question was putting HTML inside a ` – JaredMcAteer Sep 30 '19 at 15:44
1

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.

ATP
  • 2,939
  • 4
  • 13
  • 34
Deepika Chhabra
  • 11
  • 1
0

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>
Chris S.
  • 1,199
  • 11
  • 25
0

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.

ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
0

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

shadyabhi
  • 16,675
  • 26
  • 80
  • 131