0%

Hey! Do you have any query related to front end?

Sign in Sign up

Real time content editBack

This can b achieved by only applying the javascript property ("contentEditable") when user double click on the container, and when user clicks outside the div a blur event executes, which replace the value of editableContent from true to false.

Code has been explained below:

    loadDom = function(){
	//Get the editable container id and store it in a variable
	var editableContainer = document.getElementById('editableContainer');
			
	//Add double click event on eidatble container id
			editableContainer.ondblclick = function(){
				
	//Add class to the eidatble container
	this.className = 'editable';
				
	//Add editable property to eidatble container and give the vlaue to true
	this.contentEditable = true;
}
			
//Add on blur event on eidatble container id
editableContainer.onblur = function(){
				
	//Add editable property to eidatble container and give the vlaue to false
	editableContainer.contentEditable = false;
				
	//remove the class name to restore the design
	editableContainer.className = '';
				
	//Run ajax to strore the content of the editable container.
	var editableContainerHTML = editableContainer.innerHTML;
				
	//Check for result
				console.log(editableContainerHTML);
				
}
}
		
//load the DOM on page load
window.onload = function(){
   loadDom();	
}

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Smooth parallaxt effect on mouse move

    Very smooth parallax effect on mouse movement

    • 337
    • 6
    • 337
    • facebook icon
    • twitter icon
    • google plus
  • Copy text to clipboard

    Copy text from browser to your clipboard and paste as per your requirement.

    • 262
    • 2
    • 262
    • facebook icon
    • twitter icon
    • google plus
  • Css3 piano card navigation

    CSS3 transform and transition animation

    • 363
    • 12
    • 363
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back
Username
Password