Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
contenteditable
dom property
communitycreator

What is the DOM Property contentEditable in HTML?

Ayush Trivedi

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

In this shot, we will learn how to make an element editable using the DOM property contentEditable.

If you want to find out whether an element is editable or not, apply this property on the element and it will return either a Boolean value or inherit. Returning true means it is editable, and returning false means it is not editable. The returned value inherit means that the element is editable if the parent element is editable and vice-versa.

If you want to make an element editable just set contentEditable = true on the element.

Code

Check the example below where we make an element editable. To execute the example, click on the Output tab and press the button that says Click me!

Code Explanation

  • In line 5, we have a paragraph tag with id = elem. This element will be made editable when we use the contentEditable property on it.

  • In line 7, we have written a button tag which has a function change() binded with an onclick event.

  • In line 10 we have written JavaScript code in the script tag. This defines a function change(), which will be called by the button from the HTML page.

  • In line 11, we use document.getElementById() to get the <p> element with id = elem. Then we apply the contentEditable property on it and set it to true, which will make the paragraph element editable.

When we try to write in the paragraph element where the text “try to type here…” is written, we fail. However, after clicking the button, the paragraph element is editable, which means the contentEditable property is working.

RELATED TAGS

html
contenteditable
dom property
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring