In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > contentEditable

contentEditable property

Browser support:

	3

Sets or retrieves whether the contents of the object are editable.

This property is primarily used for creating rich text editing controls, but the contentEditable property allows more than just text editing, the user can edit all content within this control.

Firefox only supports the contentEditable property since version 3. If you need similar functionality in the older versions of Firefox, use the designMode property.

Note: the contentEditable property does not have any effect for disabled elements (disabled property).

Child elements that have layout inherit the value of the contentEditable property, so if you want to place a non-editable element within an editable one, you must set the contentEditable property to false.

The designMode property is supported by Internet Explorer, Opera, Google Chrome and Safari as well, but it only works for the entire document. If you want to make the entire document editable, use the contentEditable property for the body element.

You can also get the editable state of an object by the isContentEditable property.

The contents of an editable element can be modified by the execCommand method like text in a rich text editor (cut, copy, paste, delete, modifying text color, making text bold, ...). For further details, see the page for the execCommand method.

Syntax:

object.contentEditable;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: contentEditable

Possible values:

String that sets or retrieves the type of the editability.

One of the following values:

inherit

Default. Inherited from object's parent.

false

Contents are not editable.

true

Content are editable.

Default: inherit.

Example HTML code 1:

This example illustrates the use of the contentEditable attribute:

<div contenteditable="true">Edit this text!</div>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the contentEditable property:

<head>
    <script type="text/javascript">
        function ToggleEditable (button) {
            var div = document.getElementById ("myDiv");

            if (div.contentEditable == "true") {
                div.contentEditable = "false";
                button.innerHTML = "Enable editing!";
            }
            else {
                div.contentEditable = "true";
                button.innerHTML = "Disable editing!";
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" contenteditable="true">Edit this text!</div>
    <br />
    <button onclick="ToggleEditable (this);">Deny to edit!</button>
</body>