How to make a div with a blinking cursor and editable text without using <input>?

Question

I need to make a div layer so that when you click on it you will have your cursor there blinking and you can insert/delete text just like <input type="text"> does, except that I do not want to use it as it is slightly too limited to my case.

I can definitely use JavaScript.

Solution 1

DIV element has (other elements as well) contentEditable property that you can set in Javascript to true.

getElementById('YourDiv').contentEditable = true;

Solution 2

You can make the div editable by setting its contentEditable attribute / property to true. However, for anything that is slightly more powerful or flexible then very basic editing, you might want to look at existing solutions such as:

• TinyMCE
• Kevin Roth's RTE
• The YUI editor

Solution 3

Jquery can be used like this:

$.('#yourDiv').click(function() {
    $(this).attr('contenteditable', 'true');
});

Solution 4

I suggest you to use a textarea, and if that's not enough, use a WYSIWYG editor like tinyMCE or FCKeditor.

View more solutions

Comments

[Dennis Ruiter]

Ok, I thought it was only possible on the document, sorry !

[Colin Fine]

Note that 'contentEditable' is not in the HTML4.01 specification, or in the DOM2 HTML specification (1.0). It is something added by browsers.

[Quentin]

It does, however, appear in the HTML5 draft: w3.org/TR/html5/editing.html#contenteditable

[Tower]

That is kind of cool, but I really just need a working JavaScript/CSS solution that allows me to add text into DIV's InnerHTML.