Search code examples
javascriptjqueryhtmltextarea

Rendering HTML inside textarea


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?


Solution

  • 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>