Can you have an html list inside a <textarea> and it look like a list?

Question

I tried

<textarea rows="10" columns="2"><li>joe</li><li>jerry</li></textarea>

to see if I could put an html list in a <textarea> but it just showed as text. Is there any way to show it as a list inside the textarea?

Answer 1

You can't have HTML inside textareas - it's for plain text only. However, you can try using contentEditable for this. The result isn't very good, but you be the judge whether you want to use it or not. Simply use something like this:

<div class="editable" contenteditable="true">
    <ul>
        <li>List item</li>
        <li>List item</li>
    </ul>
</div>

The problems with this method is that it's difficult to predict what HTML the browser will produce, and that some of the HTML produced are truly atrocious, and that you'll have to sanitise the input a lot more than using plain text. Also, the interface for this isn't specified in the specifications, so you'll be dealing with different interfaces in different browsers.

See: http://www.jsfiddle.net/yijiang/bN2tm/ and http://html5demos.com/contenteditable