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

  • Real time content edit

    Edit content at client side.

    • 201
    • 1
    • 201
    • facebook icon
    • twitter icon
    • google plus
  • Validate email by javascript regex

    Validate email field by regular expression

    • 240
    • 4
    • 240
    • facebook icon
    • twitter icon
    • google plus
  • Select all text on single click

    Text selection has been made easy

    • 193
    • 1
    • 193
    • 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