Rendering HTML inside textarea

javascript jquery html textarea
The Coding Monk picture The Coding Monk · Jan 16, 2011 · Viewed 246.7k times · Source

I need to be able to render some HTML tags inside a textarea (namely <strong>, <i>, <u>, <a>) but textareas only interpret their content as text. Is there an easy way of doing it without relying on external libraries/plugins (I'm using jQuery)? If not, do you know of any jQuery plugin I could use to do this?

Answer

mekwall picture mekwall · Jan 16, 2011

This is not possible to do with a textarea. What you are looking for is an 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>

Related questions

Get value from text area

How to get value from the textarea field when it's not equal "". I tried this code, but when I enter text into textarea the alert() isn't works. How to fix it? <textarea name="textarea" placeholder="Enter the text...">&…

Read More
How to read line by line of a text area HTML tag

I have a text area where each line contains Integer value like follows 1234 4321 123445 I want to check if the user has really enetered valid values and not some funny values like follows 1234, 987l; For that I need to read line …

Read More
How do you get the cursor position in a textarea?

I have a textarea and I would like to know if I am on the last line in the textarea or the first line in the textarea with my cursor with JavaScript. I thought of grabbing the position of the …

Read More