contenteditable attribute is a new feature added to HTML5. By the terminology, we understand that this attribute is used to specify that whether the contents of an element are editable or not. This attribute was designed and implemented by Microsoft in Windows Internet Explorer 5.5

CSS Syntax:

This attribute has three possible values:

1. contenteditable = “” or contenteditable = “true” - this implies that the content of an element is editable.

2. contenteditable = “false” - implies that the content of an element is not editable.

3. contenteditable = “inherit” - this is the default value in case if any value is not set. This implies that the content of an element are editable only if its immediate parent element is editable.

Example 1: When an element's content is set to editable, then its child elements are also set to editable by default.

Example 2 : When only child element's contents are set to editable.

Example 3: In case when you want only parent element's content editable.

This attribute is supported in almost all browsers like Chrome 4.0+, Safari 3.1+, Mobile Safari 5.0+, Firefox 3.5+, Opera 9.0+, Opera Mini/Mobile, Internet Explorer 5.5+, Android 3.0+.

Next thing we need to know is that how to save the changes?

Basically, any change in the document will be stored to the database but in this blog we don't have database access, so we will store the changes in localStorage with the help of jQuery.

Firstly add a button next to the content.

<div class = div-one contenteditable = true>

         <p>Contents of this div are editable. Now you can make the changes in the contents of this div.</p>

</div>



<button id = save> Save changes </button>

let's create an event through the script:

var oldContent = $( '.div-one' ); // set the content

$( '#save' ).on( 'click', function(){ // store the new content in localStorage when the button is clicked

	var editedContent = oldContent.html();
	localStorage.newContent = editedContent;

} );

if(localStorage.getItem('newContent')) { // apply the newContent when it is exist in localStorage 
	
	oldContent.html(localStorage.getItem('newContent')); 
}

Here in this code we are creating new key in localStorage which contains the last change made in the content. On refreshing the page we will still see the changes we made.

Happy Coding :)