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
Get the Size of the Screen, Current Web Page and Browser Window
Html5 Form Required Attribute. Set Custom Validation Message
Where to Place JavaScript in an HTML File
How to Run a Function When the Page Is Loaded
How to Simulate a Click by Using X,Y Coordinates in JavaScript
How to Autosize a Textarea Using Prototype
Good Tutorial For Using Html5 History API (Pushstate)
Removing All Script Tags from HTML With Js Regular Expression
How to Let a Table'S Body Scroll But Keep Its Head Fixed in Place
Input Placeholders For Internet Explorer
Can One Angularjs Controller Call Another
Get Dom Content of Cross-Domain Iframe
Jquery: How to Call Resize Event Only Once It's Finished Resizing
Event Detect When CSS Property Changed Using Jquery
Disable Pasting Text into HTML Form