Rendering HTML Inside Textarea

Rendering HTML inside textarea

This is not possible to do with a textarea. You are looking for a content editable div, which is very easily done:

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

jsFiddle

div.editable {
width: 300px;
height: 200px;
border: 1px solid #ccc;
padding: 5px;
}

strong {
font-weight: bold;
}
<div contenteditable="true">This is the first line.<br>
See, how the text fits here, also if<br>there is a <strong>linebreak</strong> at the end?
<br>It works nicely.
<br>
<br><span style="color: lightgreen">Great</span>.
</div>

Can I embed HTML formatting inside of a textarea tag?

I am pretty sure the answer is no -- cannot do it with a textarea.

From the MDN docs:

The HTML <textarea> element represents a multi-line plain-text editing control.

  • Permitted content Text

HTML tag not works inside textarea?

Your approach is incorrect.

You can either use inline style to make your font color green like,

<textarea style="color:green;"  rows="15"  cols="90"  name="activities">  
text area is here
</textarea>

or

define it inside a style tag in your main html page in head section like,

<style>
textarea{
color: green;
}
</style>

Alternatively you can style the textarea input in your external style sheet like,

textarea{
color: green;
}

You can also assign an id or a class to textarea input and then add css style.

HTML inside TextArea?

Not possible using textarea, use contenteditable DIV instead.

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

You can use getters and setter as shown below:

//Get content    
var contents = document.getElementById("divId").innerHTML;

//Set content
document.getElementById("divId").innerHTML = contents

Here is the browser support for this approach.



Related Topics



Leave a reply



Submit