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

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.

score 15 · Accepted Answer · answered May 19 '09 at 11:52

15

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

getElementById('YourDiv').contentEditable = true;

answered May 19 '09 at 11:52

Robert Koritnik

103,639
52
277
404

8

Can be done in markup as well:
Editable content
– Fredrik Mörk May 19 '09 at 11:55
Ok, I thought it was only possible on the document, sorry ! – Fabien Ménager May 19 '09 at 11:58
3

Note that 'contentEditable' is not in the HTML4.01 specification, or in the DOM2 HTML specification (1.0). It is something added by browsers. – Colin Fine May 19 '09 at 12:09
2

It does, however, appear in the HTML5 **draft**: http://www.w3.org/TR/html5/editing.html#contenteditable – Quentin May 19 '09 at 15:20
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. – Tower May 19 '09 at 17:28

score 5 · Answer 2 · answered May 19 '09 at 11:58

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:

score 2 · Answer 3 · answered Dec 05 '12 at 11:52

2

Jquery can be used like this:

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

answered Dec 05 '12 at 11:52

nonshatter

3,347
6
23
27

score 1 · Answer 4 · answered May 19 '09 at 11:52

1

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

answered May 19 '09 at 11:52

Fabien Ménager

140,109
3
41
60

score 0 · Answer 5 · edited Jan 02 '14 at 02:42

0

contenteditable attribute could be used for this purpose. Following code line has been tested in IE7 and Firefox 3.0.10. One part, I have noticed that this attribute should be used in lower case only; else it wont work in Firefox.

<div id="Div_ID" contenteditable="true" tabindex="0">
   Enter text here
</div>

edited Jan 02 '14 at 02:42

jamesh

19,863
14
56
96

answered May 20 '09 at 05:10

Sourabh

1,515
1
14
21

score 0 · Answer 6 · answered May 20 '09 at 05:36

as I understand your problem, you can resove it by adding textarea into your div. It is very simply to make this textarea autosize to occupy whole div area and looks like this div.

As for contentEditable, I have seen some browsers, supported this feature for div-element and does not. Anyway, you can use iframe in your div. It's document-element can have contentEditable.

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

6 Answers6

Linked