You can set the HTML5 contenteditable attribute with the value true (i.e. contentEditable="true") to make an element editable in HTML, such as <div> or <p> element.
<p contenteditable>This is an editable paragraph.</p>
Upon clicking on the paragraph, the content of it can be edited similar to an input text field. When the contenteditable attribute is not set on an element, the element will inherit it from its parent. So all child text of a content editable element will also be editable, but you can turn it off for specific text, like so:
<p contenteditable>
This is an editable paragraph.
<span contenteditable="false">But not this.</span>
</p>
Note that an uneditable text element inside an editable element will still have a text cursor as inherited from its
parent as well.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Editable Elements</title>
</head>
<body>
<h1 contentEditable="true">Your Name</h1>
<div contentEditable="true">You Favorite Movie</div>
<p contentEditable="true">Your Comment</p>
<p><strong>Note:</strong> Click on the elements and type some text.</p>
</body>
</html>
With all that being said, I highly recommend you keep learning!
Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.
Top comments (0)