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?

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?

• javascript
• html
• textarea
• html-lists

3 Answers 3

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

This is not possible.

textarea is for displaying and editing text, not HTML.

It's not possible to have your HTML inside a <textarea> rendered as HTML.

If you want your users to be able to edit and modify the list contents you can try using a WYSIWYG HTML editor like FCKEditor or TinyMCE.

It's a bit of an overkill if you just want the list functionality and none of the other rich text editor capabilities, but both of those editors can be fully customized an trimmed down. Check the FCKEditor demo named "Custom Toobar" for an example.