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

  • Simple overlay popup with css3 and jquery

    Visibility hidden and opacity zero, together can beat display none property, which gives height zero during run time.

    • 212
    • 7
    • 212
    • facebook icon
    • twitter icon
    • google plus
  • Get index of an element

    Get index of an element

    • 184
    • 2
    • 184
    • facebook icon
    • twitter icon
    • google plus
  • Characters limit in textarea

    Limit charecters in textarea without extra space.

    • 232
    • 5
    • 232
    • 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